Question

我无法触及html主题，但我可以访问css文件。

<div class="photos">
    <img src="a.jpg" alt="" align="left" /> 
    <img src="b.jpg" alt="" align="left" />
    <img src="c.jpg" alt="" align="left" />  //align makes the images wrap
</div>

不幸的是我无法从图片中删除align =“left”，否则这个CSS片段就完成了这项工作

.photos{
    white-space: nowrap;
}
.photos img{
    display: inline;
    vertical-align: top;
}

有什么想法吗？是否可以在不使用表格的力量且仅使用CSS的情况下使这些图像水平排列？ 许多提前感谢！

Answer 1

尝试float: none;：

.photos img{
  display: inline;
  vertical-align: top;
  float: none;
}

Answer 2

试试这个：

.photos img{
    display: inline;
    vertical-align: top;
    clear: both; // clears the floating
}

您可以在W3Schools上查看有关CSS clear属性的更多信息。

编辑
对不起，我误解了你。以为你试图堆叠它们。你选择float: none或clear: right也是对的，这也会使浮动无效。我可能会同时使用两者来安全地播放IE的某些疯狂的CSS假设！ ;）

强制图像不包裹

2 个答案: