Question

我正在尝试用CSS开发特别简单的布局，但没有成功。我想实现这样的目标：

BookImage        BookImage        BookImage
BookTitle        BookTitle        BookTitle

知道我有这个：

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }

问题在于我没有得到我想要的东西。就好像每个标记（<img>或<p></p>）都被视为“列”。我想要一种方法来对<img>和<p>进行分组，将它们放在一起并获得我的布局。我以为<div>可以做到，但我错了。

Answer 1

当您要查找类似的结果时，只需将<table>与<tr>和<td>一起使用即可。您可以使用CSS设置背景，边框等样式。

Answer 2

如果您真正构建了一个表，为什么不使用所有<table>标记。一般的经验法则是有人在此网站上告诉过我，当数据实际上是表格时，可以使用表格，但不能用于布局。如果您的数据是 表格式 ，它似乎是重新发明轮子的原因。

Answer 3

您正在寻找的关键是break-inside属性。

.ThreeColumns div {
    -webkit-column-break-inside: avoid; /* this is the old name */
    break-inside: avoid; /* this is the new name */
}

但是，Firefox根本不支持此属性，即使它确实支持大多数其他列属性。

Answer 4

您的容器div上还需要display:table，孩子div上需要display:table-cell。

Answer 5

要避免div从列喷射到另一列，请将它们设置为内联框/内容。

<div class="center">
<h2>Science</h2> 
  <div class="ThreeColumns">
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
    <div> <img src="ex"><p>Title</p> </div>
  </div>

.threeColumns{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
    }
.threeColumns > div {
    display:inline-block;
    }

使用CSS构建表

5 个答案: