CSS 3列布局
CSS 3列布局
提问于 2016-04-16 20:01:23
你好，我想创建一个在Layout Link和超文本标记语言的布局，如图所示。
我已经尝试了几种方法，并在互联网上搜索，但我无法找到适合我的布局的解决方案。一开始我试着用
div{
width: 100%;
column-count: 3;
column-rule-color: red;
column-rule-width: 8px;
column-rule-style: solid;
}对于第一行，这应该是可行的。但对于第二个，我只能使用：
div{
width: 100%;
column-count: 2;
column-rule-color: red;
column-rule-width: 8px;
column-rule-style: solid;
column-width: 50%;
}但我不想成为两个列的50%。我想第一个怎么这么久，前两个在第一排。
有没有可能完成这项任务？
回答 2
Stack Overflow用户
发布于 2016-04-16 20:41:05
实现这种布局的最好方法是使用960 Grid框架。这是一个很棒的框架，而且是专门为这样的purposes.This框架而设计的，它会让你的工作变得简单一百倍。
这里有个链接：960 Grid Framework
这里有一个关于如何使用960网格系统的简短的Youtube播放列表教程：How to use 960.gs
Stack Overflow用户
发布于 2016-04-16 20:28:01
以下是实现这一点的一种方法
.row {
display: flex;
}
.row div {
border: 1px solid;
height: 30px;
margin: 5px;
}
.row:nth-of-type(1) div {
width: 33%;
}
.row:nth-of-type(2) div:first-child {
width: calc(66% + 10px);
}
.row:nth-of-type(2) div:last-child {
width: 33%;
}
.row:nth-of-type(3) div {
width: 100%;
}<div class="row">
<div></div>
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36663922
复制相关文章
相似问题
腾讯云开发者
