HTML CSS动态DIV数量并排显示在每个div的动态高度的容器中

Question

您好我正在尝试创建div s。

的行布局

每行有{1}个未知的已知数量。可能是1可能是25。

我使用了表格布局div，因为它似乎是获得行上所有'div'的相同大小的唯一方法，而不知道它们的大小，并且在没有包含display: table;时页面缩小。

我如何做同样的事情，但div的身高也是动态的。

我试图避免使用表格和使用表格中的表来修复这样的旧布局技术。

这是jdFiddle中的一个例子。正如您所看到的，第2行第1列有额外的行，但该行上的每个单元格都已增长以匹配它。

http://jsfiddle.net/djlerman/G9dgQ/2/

CSS： div

#row {
  display:            table;
  table-layout:       fixed;
  width:              95%;
  margin:             0 auto;
}

#row div {
  display:            table-cell;
}

.column {
  border:             1px solid;
  -moz-border-radius: 15px;
  border-radius:      15px;
  border-color:       grey;
  box-shadow:         grey 1em 1em 1em
  -webkit-gradient:   grey 1em 1em 1em
  -moz-linear-gradient: grey 1em 1em 1em
  margin:             0 auto;
  padding:            5px;
  text-align:         center;
}

HTML： #row { display: table; table-layout: fixed; width: 95%; margin: 0 auto; } #row div { display: table-cell; } .column { border: 1px solid; -moz-border-radius: 15px; border-radius: 15px; border-color: grey; box-shadow: grey 1em 1em 1em -webkit-gradient: grey 1em 1em 1em -moz-linear-gradient: grey 1em 1em 1em margin: 0 auto; padding: 5px; text-align: center; }

谢谢，

〜Donavon

+ ---------------------------------------------- --------------------- +

试图回答我的想法，但它不会让我发布和回答。所以这就是......

Jeeze。这个'div'的东西很疯狂。 ： - （

这是我想出的。感谢我收到的回复和很多googleing。

希望它可以帮助别人：

http://jsfiddle.net/djlerman/G9dgQ/5/

CSS：

<div id="row">
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
</div> 

<div id="row">
  <div class="column">
    Column 1
    <br />Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
  <div class="column">
    Column 4
  </div>
  <div class="column">
    Column 5
  </div>
  <div class="column">
    Column 6
  </div>
  <div class="column">
    Column 7
  </div>
  <div class="column">
    Column 8
  </div>
</div> 


<div id="row">
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
</div> 

<div id="row"> <div class="column"> Column 1 </div> <div class="column"> Column 2 </div> </div> <div id="row"> <div class="column"> Column 1 <br />Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br /> </div> <div class="column"> Column 2 </div> <div class="column"> Column 3 </div> <div class="column"> Column 4 </div> <div class="column"> Column 5 </div> <div class="column"> Column 6 </div> <div class="column"> Column 7 </div> <div class="column"> Column 8 </div> </div> <div id="row"> <div class="column"> Column 1 </div> <div class="column"> Column 2 </div> <div class="column"> Column 3 </div> </div>

HTML：

  .row {
      display: table;
      table-layout: fixed;
      width: 95%;
      margin: 0 auto;
  }
  .row div {
      display: table-cell;
  }
  .column {
      border: 0px;
      margin: 0 auto;
      padding: 0px;
      text-align: center;
      overflow: auto;
      vertical-align: top;
  }
  .border {
      padding: 5px;
      border: 1px solid;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border-color: grey;
      border-color: grey;
      box-shadow: grey .25em .25em .25em;
      -webkit-gradient: grey .25em .25em .25em;
      -moz-linear-gradient: grey .25em .25em .25em;
      vertical-align: top;
      text-align: center;
      overflow: auto;
      margin: 0 auto;
      width: 1000px;
      max-width: 1000px;
  }
  .columnSpace {
      width: 10px;
  }
  .rowSpace {
      height: 10px;
  }

.row { display: table; table-layout: fixed; width: 95%; margin: 0 auto; } .row div { display: table-cell; } .column { border: 0px; margin: 0 auto; padding: 0px; text-align: center; overflow: auto; vertical-align: top; } .border { padding: 5px; border: 1px solid; -moz-border-radius: 15px; border-radius: 15px; border-color: grey; border-color: grey; box-shadow: grey .25em .25em .25em; -webkit-gradient: grey .25em .25em .25em; -moz-linear-gradient: grey .25em .25em .25em; vertical-align: top; text-align: center; overflow: auto; margin: 0 auto; width: 1000px; max-width: 1000px; } .columnSpace { width: 10px; } .rowSpace { height: 10px; }

Answer 1

现在看来我会发布一个答案，所以我将答案放在答案部分。

Jeeze。这个'div'的东西很疯狂。 ： - （

这是我想出的。感谢我收到的回复和很多googleing。

希望它可以帮助别人：

http://jsfiddle.net/djlerman/G9dgQ/5/

CSS：

  .row {
      display: table;
      table-layout: fixed;
      width: 95%;
      margin: 0 auto;
  }
  .row div {
      display: table-cell;
  }
  .column {
      border: 0px;
      margin: 0 auto;
      padding: 0px;
      text-align: center;
      overflow: auto;
      vertical-align: top;
  }
  .border {
      padding: 5px;
      border: 1px solid;
      -moz-border-radius: 15px;
      border-radius: 15px;
      border-color: grey;
      border-color: grey;
      box-shadow: grey .25em .25em .25em;
      -webkit-gradient: grey .25em .25em .25em;
      -moz-linear-gradient: grey .25em .25em .25em;
      vertical-align: top;
      text-align: center;
      overflow: auto;
      margin: 0 auto;
      width: 1000px;
      max-width: 1000px;
  }
  .columnSpace {
      width: 10px;
  }
  .rowSpace {
      height: 10px;
  }

HTML：

<div class="row">
    <div class="column">
        <div class="border">Column 1</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 2</div>
    </div>
</div>
<div class="rowSpace"></div>
<div class="row">
    <div class="column">
        <div class="border">Column 1
            <br />Line 1
            <br />Line 2
            <br />Line 3
            <br />Line 4
            <br />Line 5
            <br />Line 6
            <br />Line 7
            <br />
        </div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 2</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 3</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 4</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 5</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 6</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 7</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 8</div>
    </div>
</div>
<div class="rowSpace"></div>
<div class="row">
    <div class="column">
        <div class="border">Column 1</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 2
            <br />Line 1
            <br />Line 2
            <br />Line 3</div>
    </div>
    <div class="columnSpace"></div>
    <div class="column">
        <div class="border">Column 3</div>
    </div>
</div>

Answer 2

<强> Updated Fiddle

以下是对CSS的相关更改：

  #row {
    display:            block;
    table-layout:       fixed;
    width:              95%;
    margin:             0 auto;
    white-space:        nowrap;
  }

  #row div {
    display:            inline-block;
    vertical-align:     top;
  }

这是做什么

table-cell显示将（惊讶）使div表现得像td。真的，你想要的是inline-block。我已经更新了CSS以反映这一点，并将#row容器更改为简单的块显示。然后，我将子div的垂直对齐设置为顶部，这是必要的，因为（默认情况下）浏览器希望将内联内容与容器的基线（文本底部）对齐。

添加white-space: nowrap;可以防止div在扩展到容器之外时破坏，这也可以解决这个问题。

这应该可以充分解决您的问题。

---

更新2

Here's a flexbox approach;

这将保留行的扩展以填充可用空间，就像您在评论中所讨论的那样。