我想连续放置三张图片，如果这三张图片的总宽度不适合浏览器窗口，那么这三张图片应该彼此下方。所以它是“全有或全无”，永远不应该只有两张图片彼此相邻，一张在下面(发生这种情况时，您在所有三张图片上使用 float:left; 逐渐减小浏览器窗口宽度)
无论窗口大小如何，所有这些都应位于浏览器窗口的中央。
我对 CSS 和 HTML 的了解有限，但我正在使用以下代码使当前数据在窗口中居中:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
table {
vertical-align: middle;
height: 100%;
margin: 0 auto;
}<table>
<tr>
<td>
<table width="280" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
"images and text"
</td>
</tr>
</table>
</td>
</tr>
</table>最佳答案
您可以使用 Bootstrap 来实现这一点。单击整页按钮并更改屏幕大小。
@media (min-width:768px) {
.inline-block-row .col-sm-4 {
display: inline-block;
float:none;
}
}<body>
<div class="container-fluid">
<h1>Inline Block Grid</h1>
<div class="row inline-block-row">
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
</div>
</div>
</body>关于html - 所有图像排成一行，或所有图像都在彼此下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38682341/