1

我正在尝试使用 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>可以做到，但我错了。

4

5 回答 5

6

当您正在寻找这样的结果时，只需使用<table>with <tr>s 和<td>s。您可以使用 CSS 设置背景、边框等样式。

于 2013-06-12T18:48:16.233 回答
4

如果您真的在构建表格，为什么不使用所有<table>标签。以前有人在此站点上告诉我的一般经验法则是，当数据实际上是表格但不适用于布局时，可以使用表格。如果您的数据是表格的，看起来确实如此，为什么要重新发明轮子。

于 2013-06-12T18:49:22.020 回答
1

您正在寻找的关键是break-inside财产。

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

然而，Firefox 根本不支持这个属性，即使它支持大多数其他列属性。

于 2013-06-12T18:55:36.257 回答
0

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

于 2013-06-12T18:46:47.200 回答
0

为了避免 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;
    }
于 2013-06-12T19:07:41.333 回答