9

（これとこれを見つけましたが、長い単語をラップすることについてです）

次のようなテーブルがあります。

<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% になりましたが、画面の幅に合わせて画像が自動的に半分に引き伸ばされました。

列を次の行に送るにはどうすればよいですか?

4

1 に答える 1

13

決定する必要があるのは、次の行に流れるときに次の行でどのような動作が発生するかです。新しい孤立した行を追加していますか？つまり、次のようになります。

#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/>して、ハード行の区切りを作成できます。それが役立つかどうかはわかりませんが、ブラウザ間でテストされていませんが、それはあなたが念頭に置いていることだと思います。

于 2012-06-28T18:30:57.997 に答える