- 综合排序
- 最热优先
- 最新优先
- 来自专栏用户2442861的专栏
CSS基础（六）：浮动深入
设置第2个浮动div 将Box-2的float属性也设置为left，可以看到Box-2也变为根据内容确定宽度，并使Box-3的文字围绕Box-2排列。 改变浮动的方向 将Box-3改为向右浮动，可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但是文字变成了夹在Box-2和Box-3之间。 <! 当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向右浮动。 ? 再次改变浮动的方向 将Box-2改为向右浮动，Box-3改为向左浮动。布局和上面例子一样。 View Code ? 当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向左浮动。 ?
55210发布于 2018-09-20 - 来自专栏日常问题
HTML之弹性布局
border-radius: 20px } .box-2{ order:2; flex-grow:2; background:#666; border-radius: 20px } .box <body>
<div class="<em>box</em>2.1K30编辑于 2022-04-24来自专栏html5期末大作业动物静态HTML网页作业作品 大学生野生动物保护网页设计制作成品 简单DIV CSS布局网站
jpg">
<div class="<em>box</em> 0,0,0,0.5); text-indent: 100px; cursor: pointer; } .box-2 ul .on { background: rgba(255,255,255,0.6); } .<em>box</em> font-size: 60px; margin-top: -40px; border-radius: 5px; text-align: center; cursor: pointer; } .<em>box</em> -3 .prev { left: 10px; } .<em>box-3</em> .next { right: 10px; } .<em>box-3</em> span::selection { background: transparent ; } .<em>box-3</em> span:hover { background: rgba(255,255,255,.5); color: rgba(255,255,255,1) } .con { padding84030编辑于 2022-08-14 - 来自专栏前端达人
【3分钟前端早读课】如何理解CSS的Display的属性：None，Block，Inline和Block
height: 100px; background: red; } #box-2 { width: 100px; height: 100px; background: blue; } #box inline-block; } body { background: #efefef; }
<div id="<em>box</em>1K00发布于 2019-07-04 - 来自专栏前端达人
「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block
100px; background: red; } #box-2 { width: 100px; height: 100px; background: blue; } #box ; } body { background: #efefef; } html部分
<div id="<em>box</em>1.7K20发布于 2019-07-12 - 来自专栏无道编程
(2019)[前端]面试题[1]：CSS BFC是什么【BFC详解】
<div class="<em>box</em> width: 300px; background-color: red; } .box-2 { width: 250px; background-color: green; } .<em>box</em>2K00发布于 2019-11-13来自专栏html5期末大作业关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店 计划出行网站设计
0,0,0,0.5); text-indent: 100px; cursor: pointer; } .box-2 ul .on { background: rgba(255,255,255,0.6); } .box font-size: 60px; margin-top: -40px; border-radius: 5px; text-align: center; cursor: pointer; } .box -3 .prev { left: 10px; } .box-3 .next { right: 10px; } .box-3 span::selection { background: transparent ; } .box-3 span:hover { background: rgba(255,255,255,.5); color: rgba(255,255,255,1) } #div1 {
2.1K40编辑于 2022-08-15来自专栏前端之旅「译」Flexbox 基本原理
container">
12<div class="box <em>box</em> .<em>box-3</em> { order: 1; } .box-7 { order: 1; } .box-8 { order: -1; } ?2.6K30发布于 2019-11-08来自专栏Coco的专栏现代 CSS 解决方案：数学函数 Round
基于此，举几个例子：
<div class="78720编辑于 2023-09-06来自专栏前端Sharing8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践
="selfadaption-layout">
<div class="<em>box</em> background-color: #f66; } .box-2 { height: 15%; background-color: #3c9; } .<em>box</em>3.9K20发布于 2021-10-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号