4

ブラウザのサイズが変更されたときにdivコンテナ内にとどまるように<td>を押しつぶすためにdivコンテナ内にあるテーブルを作成するための解決策（できればcssまたはhtml）を探しています。http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.htmlブラウザのサイズを変更すると、セルの内容がサイズを変更することに注意してください。ただし、セルのサイズと列を固定する必要があります。変化する。したがって、ブラウザが小さい場合、テーブルは6列ではなく2列のようになります。HTMLコードの例：

<div id="imageline">
    <table width="100%">
    <tr>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
    </tr>
    <tr>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
         <td>Stuff, maybe an image</td>
    </tr>
    </table>
</div>

Cssコード：

#imageline {
width: 100%;
position:relative;
}

これは簡単なcssで解決できると思います。私は幅：100％が行くところのさまざまな組み合わせを試し続けていますが、物事はうまくいきません。どんな洞察も大歓迎です。

4

2 に答える 2

1

まあ、残念ながらそれはそれほど単純ではありません。あなたがそれについて考えるならば、あなたの例では、1つの行に6つの列があり、次に他の行に3つの列があります。予想どおり、テーブルは指定された行にすべてを保持するように設計されているため、オブジェクトを行の外に移動することはできません。

したがって、それを実行するための最良の方法は、floatオプションでDIVを使用することです。これが私が話していることの簡単な例です。

于 2012-07-24T18:05:53.360 に答える
0

最善の解決策は、コンテンツをdivに入れ、それぞれfloat: left;に高さと幅を指定することです。本当にテーブルを使用する必要がある場合は、ユーザーのブラウザウィンドウのサイズに基づいてスタイルシートを調整するために、メディアクエリを調べる必要があります。しかし、これははるかに複雑になります。

于 2012-07-24T17:57:08.320 に答える