CSS3：带标题的多列系统
TCB13
我正在尝试使用CSS3column-count属性在网站中构建多列部分，所需的输出是这样的：
我使用div带有浮点数和边距的旧方案制作图像，但是我试图了解如何使用CSS3做到这一点。
到目前为止，我们设法编写了以下代码：
<div id="target">
<p>
<h2>Title 1</h2>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h2>Title 2</h2>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h2>Title 3</h2>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<h2>Title 4</h2>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
div#target p {
column-count: 4;
-webkit-column-count:4;
-moz-column-count:4;
column-gap:30px;
-moz-column-gap:30px;
-webkit-column-gap:30px;
}
该代码产生以下输出：
如何替换最初的目标？而且Title 3内容要大得多，如何告诉浏览器在找到的每个<h1>元素（或其他看不见的标记）上添加一个新列？
谢谢你。
TCB13
我设法通过以下方式解决此问题：
- 删除
<p>右边的<div>; - 将列内容包装到段落中；
- 添加以下CSS：
div#target p { column-break-after: always; -webkit-column-break-after: always; }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带表单输入字段的CSS3多列列表
- 2
CSS3多列列表
- 3
CSS3多列列表
- 4
CSS3标题问题
- 5
CSS3线性渐变带
- 6
使用CSS3显示图像标题
- 7
带标题的CSS盒
- 8
带框阴影的CSS3“加号”图标不重叠
- 9
高级CSS技巧：CSS3多列中的大写字母（大写字母）
- 10
高级CSS技巧：CSS3多列中的大写字母（大写字母）
- 11
没有行的CSS3网格系统
- 12
停止CSS3列破坏段落
- 13
css3列顺序错误
- 14
CSS3列样式问题
- 15
CSS3列中的绝对定位
- 16
CSS3列和溢出隐藏
- 17
CSS3列样式问题
- 18
CSS3列无法正确传播
- 19
带CSS多列的有序列表编号
- 20
带标题的CSS砌体网格？
- 21
为什么CSS浮动不尊重CSS3列？
- 22
具有动态列数的CSS3列布局
- 23
如何访问使用css3列创建的单个列？
- 24
带底线的CSS3三角形
- 25
带虚线边框的CSS3六角形
- 26
如何制作带编号的段落（HTML5 / CSS3）
- 27
尝试在右侧获得与左侧相同的效果[css3色带]
- 28
带关键帧的CSS3卡翻转不起作用
- 29
90度旋转表标题上的CSS3文本溢出
我来说两句