文章内容
2017/10/31 14:26:51,作 者: 黄兵
CSS 分栏布局
CSS多栏布局 扩展块布局模式，以便更容易地定义多列文本。如果 一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应该将宽度不等的文本列并排放置，就像报纸一样。
不幸的是，这是不可能的，使用CSS和HTML，而不是在固定位置强制列分栏，或严重限制文本中允许的标记，或使用英雄脚本。
糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。
使用多列布局
列计数器和宽度
有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。
属性 column-count 设置特定数量的列数。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>多列布局</title>
<style>
.wrapper {
max-width: 720px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
padding: 5px;
}
.ppdoFour_ul_h4 {
font-size: 1rem;
color: #4e4d4d;
padding-bottom: 6px;
line-height: 40px;
padding-left: 15px;
}
.ppdoFour_ul_h4 span {
color: #fff;
background: #f28571;
padding: 7px 10px;
}
.ppdoFour_ul_p {
font-size: 0.8rem;
color: #666;
float: left;
line-height: 1.4rem;
padding: 20px 10px 30px;
}
.ppdoFour_d_d_h4 span {
color: #f28571;
background: #fff;
padding: 7px 10px;
}
.ppdoFour_ul_img {
margin-left: 15px;
}
.ppdoFour_ul {
list-style: none;
overflow: hidden;
padding-left: 0;
-moz-columns: 9em 2;
-webkit-columns: 9em 2;
columns: 9em 2;
}
.ppdoFour_ul li {
border: 1px solid #ccc;
overflow: hidden;
}
.ppdo_title {
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ppdoFour">
<h3 class="ppdo_title">
梵媞三重优势，重塑多维青春
</h3>
<ul class="ppdoFour_ul">
<li>
<h4 class="ppdoFour_ul_h4">
<span>多层次提拉</span><br/>
持久效果一步到位
</h4>
<div class="ppdoFour_ul_d">
<img class="ppdoFour_ul_img" src="http://m.8677333.com/zhengxing/mianbu/ppdo/images/ppdo_18.jpg"/>
<p class="ppdoFour_ul_p fl_l">
逐层埋线复原松弛肌肤，并植入固定系统增加韧带力量，建立抗衰机制，根本解决肌肤下垂
</p>
</div>
</li>
<li>
<h4 class="ppdoFour_ul_h4" style="padding-left:26px;">
<span>波浪式植入</span><br/>
提拉皱纹稳固青春
</h4>
<div class="ppdoFour_ul_d">
<div class="ppdo_box">
<img class="ppdoFour_ul_img"
src="http://m.8677333.com/zhengxing/mianbu/ppdo/images/ppdo_21.jpg"/>
<div class="bottom"></div>
</div>
<div class="ppdo_box">
<p class="ppdoFour_ul_p fl_l" style="margin-left:26px;">
波浪式植入，平衡受力，避免线体滑动及回退，抓牢下垂组织，强力提拉，皮肤平整光滑
</p>
<div class="bottom"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
columns:9em 2;设置每列宽度9em,分成2列。
最后看一下效果：
参考资料：
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - CSS 分栏布局
评论列表