Question

我有这样的HTML结构：

    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

其中“行”类的宽度为：其父级的宽度为100％，并且父级宽度会随着时间而变化。

我的目标是，具有“半行”类的两个div必须内联并且占据“行” div的50％。如果“行” div的大小低于640px（因此半行将小于320px），则两个半行类div必须堆叠，并且每个div都占用100％的可用空间。在这两种情况下，内部div（“单元格”类）都必须平均划分可用空间。

欢迎任何建议。谢谢

Answer 1

您可以为此使用flexbox。请参阅Css-tricks中有关Flexbox的出色文章

如果您想告诉我们有关单元类的更多信息，谁需要“平均”划分可用空间（水平？垂直？两个？平方？等），我将更新代码以满足您的需求。

我希望这可以为您提供帮助。

.row {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}

.half-row {
  display: flex;
  flex-flow: row; /* or column */
  flex-basis: 100%;
  
  /* remove after tests */
  background-color: red;
  height: 500px;
}

.cell {
  flex-basis: 100%;

  /* remove after tests */
  background-color: blue; 
}

@media screen and (min-width: 640px) {
  .half-row { flex-basis: 50%; }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>
  </body>
</html>

Answer 2

@ S.C。是的，flexbox是必经之路，我也建议您阅读CSS-tricks article！实际上，我已经使用同一篇文章来构造此示例，它与屏幕宽度无关：

.row, .half-row {
  display: flex;
}

.row {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.half-row {
  width: 320px;
  flex-grow: 1;
  justify-content: space-around;

  /* for seeing better what's going on */
  background-color: #aaa;
  border: 1px solid #333;
}

 <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

使其网格响应其父级宽度

2 个答案: