获取<div>布局以分割成行

Question

我试图让<div>布局分成几行。我可以使用HTML表格完成此操作，但这种设计需要流畅，以便可以在移动设备上查看。我已经开始研究制作响应式HTML表格，这似乎不是一个好的解决方案。所以在＆＃34;我想要什么＆＃34;图片的一部分，我希望第一列和第七列自动扩展到第三行到第六行的总高度。列ONE和SEVEN将为空，行THREE，FIVE和SIX将具有不同长度的文本，行FOUR将具有width: 1020px和height: 1024px的图像。行THREE到SIX的总宽度应为屏幕宽度的80％，列ONE和SEVEN的宽度应均为屏幕宽度的10％。我使用bootstrap 3.3.6。以下是＆＃34;我得到的＆＃34;的代码。图片的一部分及其CSS。

CSS

  .wrapper {
    width: 100%;
    height: 100%; }

  .one {
    display: inline-block;
    width: 10%;
    height: 100%;
    background: blue; }

  .two {
    display: inline-block;
    width: 80%;
    height: auto; }

  .three {
    width: 80%;
    height: auto;
    background: orange; }

  .four {
    width: 80%;
    height: auto;
    background: purple; }

  .five {
    width: 80%;
    height: auto;
    background: yellow; }

  .six {
    width: 80%;
    height: auto;
    background: green; }

  .seven {
    display: inline;
    width: 10%;
    height: 100%;
    background: red; }

HTML

<div class="wrapper container-fluid">
  <div class="one">ONE</div>

  <div class="two">
    <div class="three">THREE</div>
    <div class="four">FOUR</div>
    <div class="five">FIVE</div>
    <div class="six">SIX</div>
  </div>

  <div class="seven">SEVEN</div>
</div>

Answer 1

您可以在此处使用flex或table display： （增加了一个断点，大约600-720px为flex＆amp; 660px for table version）

以完整页面模式运行代码段以查看行为

.wrapper {
   width: 100%;
   height: 100%;
 }
 .one {
   background: blue;
 }
 .two {
   width: 80%;
 }
 .three {
   background: orange;
 }
 .four {
   background: purple;
 }
 .five {
   background: yellow;
 }
 .six {
   background: green;
 }
 .seven {

   background: red;
 }
/* FLEX*/
 .flex  {
   display: flex;
   flex-wrap:wrap;
   }
.flex>div {flex:1 1 10%}
.flex .two {
  min-width:600px;
  max-width:100%;
  flex:1 1 80%
  }
/* TABLE*/
 .table {
   display: table;
   table-layout: fixed;
 }
 .table> div{
   display: table-cell;
 }
@media (max-width : 660px ) {
  .table > div {display:block;width:100%;
    }
  }

<div class="wrapper container-fluid flex">
    <div class="one">ONE</div>

    <div class="two">
      <div class="three">THREE</div>
      <div class="four">FOUR</div>
      <div class="five">FIVE</div>
      <div class="six">SIX</div>
    </div>

    <div class="seven">SEVEN</div>
  </div>
 
<hr/>


  <div class="wrapper container-fluid table">
    <div class="one">ONE</div>

    <div class="two">
      <div class="three">THREE</div>
      <div class="four">FOUR</div>
      <div class="five">FIVE</div>
      <div class="six">SIX</div>
    </div>

    <div class="seven">SEVEN</div>
  </div>

Answer 2

如果你使用bootstrap，如果标签在问题中，并且你有一个来自bootstrap container-fluid的默认类，那么你只需要使用已经定义的引导类.row / {{ 1}}并在col-*-*

中设置display:flex

.row

.row {
  display: flex
}
.one {
  background: blue;
}
.three {
  background: orange;
}
.four {
  background: purple;
}
.five {
  background: yellow;
}
.six {
  background: green;
}
.seven {
  background: red;
}

Answer 3

很长一段时间以来，我一直在使用媒体查询。

.container {
    margin: 10%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
}
@media (max-width: 900px) {
    .container {
        width: calc(100% - 12px);
    }
}
.column {
    width: calc(45% - 6px);
    height: auto;
    float: left;
}
@media (max-width: 600px) {
    .column {
        width: calc(100% - 6px);
    }
}

HTML：

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

您还可以通过将divs中的calc等式更改为.column，使用((100% / 3) - 6px)（3列）执行此操作。对于每个新列，更新divison。请注意，沿途它们会变小。

归功于@Adam Buchanan Smith

Fluidity with Cards of Different Lengths