作者：2414220942_d5ab70 | 来源：互联网 | 2023-09-04 18:56
一、使用float实现横列布局的方法如下面所示：DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行div1div2 实现下面图片中布局的css样式如下：分析：1、
一、使用float实现横列布局的方法
如下面所示：DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行
实现下面图片中布局的%ignore_a_1%如下：
分析：
1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
<section class="active_div1"> <div> <img id="active_div11" src=""> div> <div> <img id="active_div12" src=""> div> <div> <img id="active_div13" src=""> div> section>
|
.active_div1 div { float: left; width: 33.33%; box-sizing: border-box; } .active_div1 div:nth-child(1) { padding-left: 10px; } .active_div1 div:nth-child(3) { padding-right: 10px; } .active_div1 div:nth-child(2) { padding: 0 5px; }
|
2、第二行只有中间图片的最有边距是5px;布局如下：
<section class="active_div2"> <div> <img id="active_div21" src="" onclick="imgClick(this)"> div> <div> <img id="active_div22" src="" onclick="imgClick(this)"> div> <div> <img id="active_div23" src="" onclick="imgClick(this)"> div> section>
|
.active_div2 div { width: 33.33%; float: left; box-sizing: border-box; } .active_div2 div:nth-child(2) { padding: 0px 5px; }
|
注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
二、使用display:inline-block
display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
红框中的布局就是使用display:inline-block最经典的布局。
<header id="consume_h"> <span>已过期为消费不退款span> <span>免预约span> header>
|
.consume_h span { display: inline-block; } .consume_h span:before { content: "f120"; display: inline-block; margin-right: 5px; margin-left: 10px; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; }
|
此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
此出还有一个经典的布局：
这种布局一般是：
<div> <img src="" alt=""> <p> 测试勿拍 p> div>
使用定位position:absolute常用于左边固定，右边自适应的情况。
注：固定宽度列的高度>自适应宽度列？
三、使用flexible box实现 真正意义上的流体布局
这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
http://www.dengb.com/HTML_CSS/1220629.htmlwww.dengb.comtruehttp://www.dengb.com/HTML_CSS/1220629.htmlTechArticle一、CSS实现横列布局的方法总结，css实现横列布局 一、使用float实现横列布局的方法 如下面所示：DIV1和DIV2都可以选择向左或者向右浮动…
—-想了解更多的css相关样式处理怎么解决关注<编程笔记>
京公网安备 11010802041100号