CSS完成多行两列的合理布局的案例编码

2021-03-17 14:13 jianzhan

1.多列多行:

 

HTML:

<div class="box1">
    box1:完成多列多行合理布局
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

CSS:

.box1 {
  width: 500px;
  background: #EEEEEE;
}
.box1 ul {
  clear: both;
  overflow: hidden;
}
.box1 ul li {
  width: 48%;
  height: 100px;
  margin-bottom: 10px;
  background: skyblue;
  float: left;
}
.box1 ul li:nth-child(even) {
  margin-left: 4%;
}

这用到了nth-child(),适配ie9及以上的访问器,正中间的间隙便是两个并排div宽度之和,100%减去后剩余的宽度;

既然提到了nth-child(),那末就要说1下nth-of-type(),也是只适配ie9及以上的访问器。它与nth-child的差别是:

<div class="box">
    <h1></h1>
    <h1></h1>
    <p></p>
    <p></p>
    <p></p>
</div>

假如要让第2个p标识情况为鲜红色,那末,p:nth-child(4)这个能完成实际效果;而p:nth-of-type(2),就可以完成。因此nth-of-type无论p标识前面有是多少內容,都只认p的第2个元素。而nth-child确是找它父级的第几个元素。在这类状况下nth-of-type的优势就反映出来了。

2.多行两列

 

HTML:

<div class="box2">
    box2:多行两列
    <ul>
        <li>
            <div class="com">
                111
            </div>
        </li>
        <li>
            <div class="com">
                222
            </div>
        </li>
        <li>
            <div class="com">
                333
            </div>
        </li>
        <li>
            <div class="com">
                444
            </div>
        </li>
    </ul>
</div>

CSS:

.box2 {
  background: #EEEEEE;
  margin-top: 20px;
  width: 500px;
}
.box2 ul {
  overflow: hidden;
  margin-left: ⑴0px;
  background: #EEEEEE;
}
.box2 ul li {
  width: 33.3333%;
  height: 50px;
  float: left;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.box2 ul li .com {
  height: inherit;
  background: skyblue;
}

这里完成的基本原理是:子级应用padding-left(元素间的空隙)和box-sizing:border-box,父级应用margin-left负值,这个值和子级padding-left是1样的。li里边加div只是以便让实际效果显著,要不然给li再加情况,因为box-sizing:border-box的存在,li看起来便是没实际效果所有连在1起的。

假如要完成2列,4列,5列等两列,只需改动li的宽度(均值分派)就可以了。

这类做法适配ie8及以上的访问器,在ie7下,每一个li的宽度大约比一切正常的少2%上下,例如3列,一切正常显示信息的话,每一个li宽度是33.333%,可是ie7下需设定31.333%,才可以基础一切正常显示信息。。。这实际的缘故没深究,后边有時间再来补这个坑 ×××

3.圣杯合理布局:

 

HTML:

<div class="box3">
    <div class="header">圣杯合理布局(应用波动)顶部</div>
    <div class="container">
        <div class="center">
            正中间自融入宽度,留意这个center是在left的div前面
        </div>
        <div class="left">
            左部固定不动宽度
        </div>
        <div class="right">
            右部固定不动宽度
        </div>
    </div>
    <div class="footer">圣杯合理布局底部</div>
</div>

CSS:

.box3 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box3 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box3 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
}
.box3 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: ⑴00%;
  position: relative;
  left: ⑴00px;
}
.box3 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box3 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: ⑴30px;
  position: relative;
  right: ⑴30px;
}
.box3 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

圣杯合理布局最关键的是正中间那并列的3个div,左右两个div,我只是拿来滥竽充数的。。。

完成全过程大概以下:1.这3个div的HTML放置的前后次序是有注重的,center这个显示信息在正中间的div,在html里是排在最前面的,随后是left,最终是right。

2.在container沒有设定padding,left这个div和right这个div都没设定margin与相对性精准定位relative以前,3个div都float:left。这时候候网页页面上显示信息的是center占有1行,随后是left这个div,随后是right这个div

3.随后left这个div设定margin-left:⑴00%。这样left就可以从第2排蹦到第1排最左侧并遮盖center这个div。

4.right这个div设定margin-left: ⑴30px;这个值是它自身宽度的尺寸。随后right这个div也蹦到第1排最右侧并遮盖center这个div。

5.这个情况下container设定padding,这个padding的尺寸是left与right这两个div各自的宽度,随后left与right这两个div各自再设定相对性精准定位,挪动自身宽度的间距,就一切正常显示信息了。

这类合理布局方法ie7都适配,ie6沒有检测过。。。

4.仿圣杯合理布局

 

HTML:

<div class="box4">
    <div class="header">圣杯合理布局2(应用精准定位)顶部</div>
    <div class="container">
        <div class="left">
            左部固定不动宽度
        </div>
        <div class="center">
            正中间自融入宽度,不用考虑到次序
        </div>
        <div class="right">
            右部固定不动宽度
        </div>
    </div>
    <div class="footer">圣杯合理布局2底部</div>
</div>

CSS:

.box4 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box4 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box4 .container {
  clear: both;
  overflow: hidden;
  padding: 0 130px 0 100px;
  position: relative;
}
.box4 .container .left {
  width: 100px;
  background: #008B8B;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.box4 .container .center {
  background: #00BFFF;
  height: 100px;
  width: 100%;
}
.box4 .container .right {
  width: 130px;
  background: #FA8072;
  height: 100px;
  position: absolute;
  top: 0px;
  right: 0px;
}
.box4 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

这类方法完成的思路是:上下两侧肯定精准定位,随后正中间的div设定padding,也能做到一样的实际效果。也无需在乎正中间的3个div的排版次序,我1直都在用这类方法。

也适配ie7,ie6没检测过

5.双飞翼合理布局

 

HTML:

<div class="box5">
    <div class="header">双飞翼合理布局顶部</div>
    <div class="container">
        <div class="center">
            <div class="center-in">
                正中间自融入宽度,留意这个center是在left的div前面
            </div>
        </div>
        <div class="left">
            左部固定不动宽度
        </div>
        <div class="right">
            右部固定不动宽度
        </div>
    </div>
    <div class="footer">双飞翼合理布局底部</div>
</div>

CSS:

.box5 {
  background: #EEEEEE;
  color: white;
  margin-top: 20px;
}
.box5 .header {
  width: 100%;
  background: #008000;
  height: 50px;
}
.box5 .container {
  clear: both;
  overflow: hidden;
}
.box5 .container .left {
  width: 100px;
  float: left;
  background: #008B8B;
  height: 100px;
  margin-left: ⑴00%;
}
.box5 .container .center {
  background: #00BFFF;
  height: 100px;
  float: left;
  width: 100%;
}
.box5 .container .center .center-in {
  margin: 0 130px 0 100px;
}
.box5 .container .right {
  width: 130px;
  float: left;
  background: #FA8072;
  height: 100px;
  margin-left: ⑴30px;
}
.box5 .footer {
  width: 100%;
  background: #222222;
  height: 30px;
}

双飞翼合理布局和圣杯合理布局看起来都类似,可是最大的不一样便是:双飞翼合理布局中center正中间的这个div里边也有1个div,关键根据这个div的margin值来做到合理布局的目地。随后left和right这两个div都无需再设定相对性精准定位relative。其它的都基础1样

适配ie7,ie6未检测过。

也有很多多行两列的合理布局方法,例如css3的flex,inline-block这些。。要是有思路,再难的合理布局都能完成。

总结

以上所述是网编给大伙儿详细介绍的CSS完成多行两列的合理布局,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!