(我发现
this和
this,但它们是关于包装长话)
我有这样一张桌子：
<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％,但是图像会自动拉伸到一半以适应屏幕宽度.
如何将列发送到下一行？
解决方法
您需要决定的是下一行在下一行流动时会发生什么行为.是否添加了新的孤立行,即：
#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 />如果需要,在那里创建标记的硬标记.不确定这是否有帮助,并且没有在浏览器之间进行测试,但这就是我认为您的想法.
