我有一张这样的表:
<table id="myTable" width="100%" border="5" style="table-layout:fixed">
<tr>
<td><img src="photo1"></td>
<td><img src="photo2"></td>
<td><img src="photo3"></td>
<td><img src="photo4"></td>
<td><img src="photo5"></td>
<td><img src="photo6"></td>
</tr>
</table>
如果用户的屏幕宽度很小,我需要换行。 我需要包装列并获得如下表格结果:
我添加了 style =“table-layout:fixed”,但这使得表格宽度恰好为100%,但图片会自动拉伸到一半以适合屏幕宽度。
如何将列发送到下一行?
答案 0 :(得分:12)
您需要决定的是下一行向下一行发生的行为。是否添加了新的孤立行,即:
#container {
width: 95%;
max-width: 646px;
margin: 10px auto;
border: 5px solid black;
padding: 5px;
}
#container .row {
border: 1px solid green;
border-left: 0;
border-top: none;
margin: 0;
padding: 0;
}
#container br {
clear: both;
}
#container .block {
border: 1px solid blue;
border-bottom: 0;
border-right: 0;
float: left;
width: 128px;
}
<div class="row">
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<br/>
</div>
http://jsfiddle.net/userdude/KFFgf/
你会看到溢出成为一个新行,右边是剩余的空白区域。
如果您只想要一个“滚动”块,您可以:
http://jsfiddle.net/userdude/KFFgf/1/
行只是在流量中阻塞。如果需要,您可以在其中放置<br/>
标记以创建硬行中断。不确定这是否有帮助,并且没有在浏览器之间进行测试,但这就是我认为您的想法。