html - 将长 HTML 表格换行到下一行

Question

(我找到了 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%，但图像会自动拉伸(stretch)到一半以适应屏幕宽度。

如何将列发送到下一行？

Answer 1

您需要决定的是下一行在向下流动到下一行时会发生什么行为。它是否添加了一个新的孤立行，即:

#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/

您会看到溢出变成了一个新行，右边是剩余空间和空白区域。

如果你只是想要一个“滚动”的 block ，你可以:

http://jsfiddle.net/userdude/KFFgf/1/

行在流动中阻塞的地方。你可以把 <br/>如有必要，其中的标签可以创建硬换行符。不确定这是否有帮助并且尚未跨浏览器进行测试，但我认为这就是您的想法。