4

您好我正在尝试创建divs 的行布局。

div每行的未知数。可能是 1 可能是 25。

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

我将如何做同样的事情，但divs 高度也是动态的。

我试图避免使用表格和使用表格中的表格来解决此类问题的旧布局技术。

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

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

CSS： 

#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： 

<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”的东西非常复杂。:-(

这是我想出的。感谢我得到的回复和大量的谷歌搜索。

希望它可以帮助其他人：

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>

4

2 回答 2

1

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

天哪。这个“div”的东西非常复杂。:-(

这是我想出的。感谢我得到的回复和大量的谷歌搜索。

希望它可以帮助其他人：

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>
于 2014-06-06T16:22:25.053 回答
0

更新小提琴

以下是对 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 可以防止 div 在扩展超出容器时中断，这也应该可以解决该问题。

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

更新 2

这是一个 flexbox 方法；

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

于 2013-03-11T19:53:36.600 回答