每一栏中的间距要依靠内部div，水平间距是由内部div左右外边距生成的，它们把这个div压缩了一下，这才使内容远离了父元素article 。
而每一栏中的垂直间距是由父元素的内边距生成的。为什么要用父元素呢？就是在父元素没有上、下边距的情况下，子元素的上下边距会折叠的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行多栏布局</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 960px;
border: solid 1px;
}
header {
background-color: gray;
}
nav {
background-color: lightslategray;
}
section#feature_area article {
width: 320px;
float: left;
/*对于作为栏的容器,只能添加垂直内边距*/
padding: 10px 0;
background-color: #fff;
border-top: 4px solid #f7be84;
}
/*为所有内容盒子添加公共样式*/
section#feature_area article .inner {
margin: 10px 20px;
text-indent: 20px;
padding: 5px;
background-color: gray;
border: 5px solid;
}
/*以下三条分别为三个内容盒子设定样式*/
section#feature_area article:nth-child(1) .inner {
border-color: #d7dd6f;
}
section#feature_area article:nth-child(2) .inner {
border-color: #f6dec5;
}
section#feature_area article:nth-child(3) .inner {
border-color: #d1d8e4;
}
section#promo_area article {
width: 240px;
float: left;
padding: 10px 0;
background-color: #fff;
}
section#promo_area article .inner {
margin: 10px 20px;
background-color: grey;
border: #d7dd6f solid 5px;
}
footer {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Full-width content</h1>
</header>
<nav>
<p>Navigation menus go here</p>
</nav>
<section id="branding">
<img src="../images/ad.jpg">
</section>
<section id="feature_area">
<article>
<div class="inner">
<p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
</div>
</article>
<article>
<div class="inner">
<p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
</div>
</article>
<article>
<div class="inner">
<p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
</div>
</article>
</section>
<section id="promo_area">
<article>
<div class="inner">
<p>Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
</div>
</article>
<article>
<div class="inner">
<p>Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
</div>
</article>
<article>
<div class="inner">
<p>Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
</div>
</article>
<article>
<div class="inner">
<p>Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
</div>
</article>
</section>
<footer>
<p>A CSS template</p>
</footer>
</div>
</body>
</html>
相关推荐
支持多行多列等复杂布局的RadioGroup，重点是！！使用简单！！，称之为Multi_RadioGroup_Plus吧
flex多行布局弹性盒子
【优化布局】基于遗传算法车间设备布局matlab源码含GUI.md
关于div及web2.0的布局方法实例,用div的方法显示多行及多列
基于数据挖掘的多行设备动态布局.pdf
在分析单目标优化缺陷的基础上,构建了车间多行布局物流成本和空间利用率多目标组合优化模型。设计了车间多行布局遗传算法,针对自动换行、两行布置和三行布置三种不同布局策略的编码方式、遗传操作和适应度函数进行了...
RecyclerView优雅的实现多条目布局
得多行显示要选的内容item，常规做法使用RadioGroup加上RadioButton来实现，但是前提是我们知道所要选择的item个数，如果碰到这么一种情况，所给出的item数量不确定，也就是从后台服务器中获取，有多少显示多少？...
box1:实现两列多行布局 <li>111 <li>222 <li>333 CSS: .box1 { width: 500px; background: #EEEEEE; } .box1 ul { clear: both; overflow: hidden; } .box1 ul li { width: 48%; height: 100px; ...
QT实现动态布局 博客：QT实现动态布局 地址：https://tinycool.blog.csdn.net/article/details/124525866
CToolTipCtrl 多行显示。 继承CStatic，鼠标靠近时显示多行tip信息。 使用UniCode，VC6.0,自己改下字符串的显示。
CSS布局常用的方法：float : none | left | right 取值： none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: <div id=warp> 这里是第...
c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制多行文本:自动换行:文本c# winform 绘制...
可以实现多行查询数据转换到一行上显示，多行的某列信息用“，”号隔开。
基于Qt5的TabBar，可以自适应宽度，宽度不足时自动多行显示，Qt4也可以，稍加修改就好了，里面有效果图。
仿微信多行限制多行输入，一体键盘
主要是关于sqlserver的多行转列的问题，这是我经过个人测试的语句。
c# winform =====datagridview 多行表头 datagridview 多行表头 datagridview 多行表头 可不容易找到的啊 费了好大力，呵呵 分数稍微高一点
在dockerfile中给指定文件添加多行，注意echo后面的”$”符号 [root@master01 ovn-node]# cat dockerfile FROM ovn-node:2.11.2 # sed 删除指定行 RUN sed -i '53d' /root/start-ovs.sh # 用echo添加多行内容 RUN ...
实现了Android的单选按钮组的自定义和多行多列的功能。