Question

我正在尝试放置6个盒子，作为一个小练习，以了解如何做。我希望将这6个盒子连续分成4个盒子，然后在第二个盒子中分成2个盒子，我想用CSS中的显示功能来做到这一点，所以这不仅适用于这种情况。这就是我一直在尝试的。 https://gyazo.com/f64788cdf85d263e56452c1412fdcfb0?token=f6c45c6813c3fc47addb63483cee3f6a

    .parent{
        display: flex;
        flex-wrap: wrap;
    }

    .parent-wrapper {
        height:100%;
        width:100%;
        border: 1px solid black;}

    .child {
        width: 300px;
        height: 200px;
        background-color: green;
        border: 1px solid red;
        margin: 5px;
        flex: 1 0 21%; 
    }

Answer 1

不确定您是不是这个意思，但我从您的问题中了解了什么

HTML：

<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell"></div>
            <div class="divTableCell"></div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell"></div>
            <div class="divTableCell"></div>
       </div>
       <div class="divTableRow">
           <div class="divTableCell"></div>
       </div>
       <div class="divTableRow">
           <div class="divTableCell"></div>
       </div>
   </div>
</div>

CSS：

.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}

Answer 2

如果要使用display：网格，则解决方案可能如下所示： https://jsfiddle.net/uvrjs7op/

<div class='Wrapper'>
  <div class='Item-A'></div>
  <div class='Item-B'></div>
  <div class='Item-C'></div>
  <div class='Item-D'></div>
  <div class='Item-E'></div>
  <div class='Item-F'></div>
</div>

.Wrapper {
  Display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50px 50px;
  Background: orange;
}

.Item-A{
  grid-column-start: 1;
  grid-column-end: 2;
  Background: Green;
}
.Item-B{
  grid-column-start: 2;
  grid-column-end: 3;
  Background: blue;
}
.Item-C{
  grid-column-start: 3;
  grid-column-end: 4;
  Background: red;
}
.Item-D{
  grid-column-start: 4;
  grid-column-end: 5;
  Background: brown;
}
.Item-E{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  Background: yellow;
}
.Item-F{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  Background: purple;
}

Answer 3

一个简单的解决方案是

解决方案

#wrapper {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  width:100%;
}
#wrapper > div {
  margin:10px;
  background-color:#bada55;
}

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
  <div id="fourth">fourth</div>
  <div id="fifth">fifth</div>
  <div id="sixth">sixth</div>
</div>

Answer 4

您可以使用display：flex。

HTML：

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS （已编辑）：

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex div {
    height: 200px;
    background-color: green;
    border: 1px solid red;
    box-sizing: border-box;
    /*flex: 1 0 23%;*/
    width: 24.1%;
    margin: 5px;
    /*margin-bottom: 5px;*/
}

输出如下：

在具有自定义限制的多行上显示div

4 个答案: