选项＃1

Question

我试图基本上阻止彼此相邻并具有定义的宽度。但是，我希望单元格的高度与行中的其他单元格对齐。

请参阅以下codepen以了解要使用的代码：

http://codepen.io/thinkbonobo/pen/EKdxgP

.cm-table-frame {}

.table-frame-row {}

.table-frame-cell {
  border: 1px solid lightskyblue;
  /*   display: table-cell; */
  display: inline-block;
  vertical-align: top;
  width: 100px;
}

我尝试了两种方法：

display：table-cell - 我喜欢这个方法，因为它正确设置了高度，但我似乎无法弄清楚如何设置宽度。
display：inline-block - 这个方法让我可以轻松设置宽度，但我无法设置高度来动态匹配行/行中的块。有些单元格可能有1行，有些单元格可能有5行，但对于给定的行，它们都应该是相同的高度。

非常感谢您的建议！

Answer 1

如果要使用display：table-cell，则设置max-width和min-width：

.table-frame-cell {
  border: 1px solid lightskyblue;
  display: table-cell;
  vertical-align: top;
  min-width: 100px;
  max-width: 100px;
}

或

如果你想使用display：inline-block，你需要设置元素的高度：

.table-frame-cell {
  border: 1px solid lightskyblue;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
}

Answer 2

通常建议not to use tables for layouts，display:table-cell将验证正常，但最终会有相同的问题（也在提供的链接中讨论过）。

如果使用CSS Level 3不是问题，可以使用flexboxes（Flexbox Browser Compatibility），如下所示：

＆＃13;

.flex-container {
  background-color: green;
  display: flex;
}
.flex-container > div {
  background-color: orange;
  flex: 1;
  padding: 15px 20px;
  margin-right: 20px;
  max-width: 120px;
}

＆＃13;

<div class="flex-container">
  <div>Very short text.</div>
  <div>This is a lot of text, even though it's probably very little compared to what you're trying to do, as stack's preview window is comfortably narrow.</div>
  <div>Another bit of text for flavor.</div>
</div>

＆＃13;

在没有CSS3实现的浏览器中使用的唯一解决方案是使用Javascript或jQuery将所有框设置为相同的高度。

Answer 3

选项＃1

（对于旧浏览器支持）

使用Error:(77, 28) Cannot prove that com.logic.domain.entity.Song <:< org.squeryl.KeyedEntity[Iterable[com.logic.domain.entity.Song]]. songsQuery.delete(songs) ^和display:table/table-cell，如下所示：

width

body {
  margin: 0
}
.table {
  width: 100%;
  display: table;
}
.cell {
  width: 25%;
  display: table-cell;
}
.cell:nth-child(odd) {
  background: red
}
.cell:nth-child(even) {
  background: green
}

选项＃2

（如果您不介意不支持旧浏览器）

您可以使用CSS3 <div class="table"> <div class="cell"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div> <div class="cell"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> <div class="cell"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div> <div class="cell"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> </div>

flexbox

body {
  margin: 0
}
.table {
  width: 100%;
  display: flex;
}
.cell {
  width: 25%;
  flex:1
}
.cell:nth-child(odd) {
  background: red
}
.cell:nth-child(even) {
  background: green
}

创建一组＆＃39;细胞＆＃39;具有固定宽度和对齐高度的

3 个答案:

选项＃1

选项＃2