Html 强制图像不换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3010810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing images to not wrap
提问by Mohammad
I can't touch the html theme but I have access to the css files.
我无法触摸 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>
Unfortunately I can't remove align="left" from the images otherwise this CSS snippet would have done the job
不幸的是，我无法从图像中删除 align="left" 否则这个 CSS 片段就可以完成这项工作
.photos{
white-space: nowrap;
}
.photos img{
display: inline;
vertical-align: top;
}
Any ideas? Is it even possible to make these images line-up horizontally without using the force of a table and only with CSS?
Many Thank in advance!
有任何想法吗？甚至可以在不使用表格的力量而仅使用 CSS 的情况下使这些图像水平排列吗？
非常感谢提前！
回答by Gert Grenander
Try float: none;:
尝试float: none;：
.photos img{
display: inline;
vertical-align: top;
float: none;
}
回答by Frankie
Try this:
尝试这个：
.photos img{
display: inline;
vertical-align: top;
clear: both; // clears the floating
}
You can check out more about the CSS clearproperty on W3Schools.
您可以clear在W3Schools上查看有关 CSS属性的更多信息。
EDIT
Sorry I misread you. Thought you were trying to stack them. You're right to go with float: none, or clear: rightthat would also negate the float. I would probably go with both to play safe on IE's sometime crazy CSS assumptions! ;)
编辑
对不起我误读了你。以为你在试图堆叠它们。你是对的float: none，否则clear: right也会否定浮动。我可能会同时使用两者，以便在 IE 有时疯狂的 CSS 假设上保持安全！;)
