Question

是否可以通过flex-box，css-grid或除JS之外的任何其他方式通过普通的CSS创建这样的布局：

+--------------------------+ +---------------+  
|                          | | 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    |               |  
|  |           | |           |               |  
|  |           | |           |               |  
|  +-----------+ +-----------+               |  
|                                            |  
+--------------------------------------------+

因此，卡片首先从右侧开始弯曲，然后从底部开始弯曲，如果主要内容具有不同的高度，则整个“右侧”侧边栏应包含最大数目的卡片，但高度应小于此高度而不是内容容器。

Answer 1

我尝试使用有限的原始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>

Working fiddle example

在CSS中元素之间的线程化，例如在发布软件中

1 个答案: