css, html, 图像对齐

Question

我有 6 张图片，需要将它们对齐为：

 Img1        Img2

 Img3        Img4

 Img5        Img6

我该怎么办？我不能正确地做到这一点。

<Image src = "" style = "margin-top: -10em; margin-left: -50em; float: left; width: 450px;" />

<Image src = "" style = "margin-top: -10em; margin-left: -10em; float: left; width: 450px;" />

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />   

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />   

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />

图像大小相同。

Answer 1

很抱歉，但是

请不要使用内联样式。

看在上帝的份上，don't use tables for non-tabular data！

将它们全部放在一个列表中：

<ul>
  <li><img 1></li>
  <li><img 2></li>
  <li><img 3></li>
  <li><img 4></li>
  <li><img 5></li>
  <li><img 6></li>
</ul>

在单独的样式表中设置样式：

ul li {
  float: left;
  width: 49%;
}

什么的。如果您不希望列表占据整个屏幕，只需指定 ul 宽度即可。

Answer 2

包装一个

- 在它们周围标记，如下所示：

<div style="width:yourimagewith x 2">
  <img src="1" />
  <img src="2" />
  <img src="3" />
  <img src="4" />
</div>

此解决方案不会让您对样式和浮动等大惊小怪。 另外，如果你添加新图片，你不必在每两张图片之后添加一个新的 div 标签，这对我来说似乎不便于维护。

Answer 3

这就是诀窍：

img { float:left; }
img:nth-child(odd) { clear:left; }

现场演示： http://jsfiddle.net/simevidas/9k6ML/1/

注意，一些落后的浏览器（IE...khm）不支持:nth-child(odd)。

Answer 4

只需将每个图像向左浮动，然后在每第二个图像之后输入以下 <div style="clear: both;"></div> 即可解决您的问题。