css中的元素之间的线程，就像在发布软件中一样
css中的元素之间的线程，就像在发布软件中一样
提问于 2018-07-20 02:34:14
有没有办法用普通的css来创建这样的布局，比如通过flex-box，css-grid或者除了JS之外的任何东西：
+--------------------------+ +---------------+
| | | sidebar |
| | | container |
| | | with border |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #1 | |
| | | | | |
| | | | | |
| main content | | +-----------+ |
| of various | | +-----------+ |
| height | | |sidebar | |
| | | |card #2 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | | +-----------+ |
| | | |sidebar | |
| | | |card #3 | |
| | | | | |
| | | | | |
| | | +-----------+ |
| | +---------------+
| | not enough space
| | for one more card
+--------------------------+
+--------------------------------------------+
| "sidebar" continues here, with border and |
| this header |
| +-----------+ +-----------++-----------+ |
| |sidebar | |sidebar ||sidebar | |
| |card #4 | |card #5 ||card #6 | |
| | | | || | |
| | | | || | |
| +-----------+ +-----------++-----------+ |
| +-----------+ +-----------+ |
| |sidebar | |sidebar | |
| |card #7 | |card #n | |
| | | | | |
| | | | | |
| +-----------+ +-----------+ |
| |
+--------------------------------------------+ 所以卡片围绕着主要内容，首先从右边开始，然后从底部开始，如果主要内容有不同的高度，那么整个难度右侧的“真正”侧边栏，应该包含最大数量的卡片，但它的高度应该小于内容容器。
回答 1
Stack Overflow用户
发布于 2018-07-20 02:50:38
我试着用一种简单的方式做你的布局，使用有限的和普通的CSS。网格是响应式的，我试图让名称在某种程度上遵循Bootstrap的指导原则。
.col {
position: relative;
float: left;
color: white;
}
.col-9 {
width: 75%;
}
.main {
min-height: 200px;
background-color: red;
}
.col-12 {
width: 100%;
background-color: red;
}
.sidebar .col-12 {
width: 100%;
background-color: green;
}
.col-3 {
width: 25%;
background-color: green;
}
.col-4 {
width: 33%;
background-color: blue;
}<div class="main col col-9">
<div class="col-12">main</div>
</div>
<div class="sidebar col col-3">
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51429667
复制相关文章
相似问题
腾讯云开发者
