Question

我正在设计一个包含7个图像的表格，这些图像的大小大致相同。基本上，我想知道是否有一种方法（除了将每一行分成不同的表）以改变HTML倾向以将所有内容放入列中，并强制它根据行进行布局。

这是jsfiddle的内容。（我使用了Lorem Ipsum而不是图像）我希望顶部和底部的行居中。

我知道如果我将它分成三个表并将每个表分别设置为width:xxxpx和margin: 0 auto，我就可以这样做，但不愿意这样做。

任何建议都表示赞赏。

Answer 1

为什么你甚至打扰每行创建多个单元格？只需将所有图像放在同一个单元格中，然后彼此相邻。

Answer 2

请参阅vertical-align属性。

Answer 3

是的，为这个问题选择多个div可能会更好。是否可以执行以下操作：

HTML：

<div class="rows">
   <div class="top">
       <img></img>
       <img></img>
   </div>
   <div class="middle">
       <img></img> 
       <img></img>
       <img></img>
   </div>
   <div class="bottom">
       <img></img>
       <img></img>
   </div>
<div>

CSS：

.rows{
  margin:10px;
}

.top, .bottom{
  padding-left:85px;
  padding-right:85px;
}

.top, .bottom, .middle
{
  width:520px;
}

.rows img
{
  margin: 10px;
  width:150px;
}

基本上，让正常的图像流控制它们的位置，而是使用边距和填充来均衡间距。

从HTML表中删除列趋势

3 个答案: