2

できるだけ多くのブラウザーで機能するレスポンシブ テーブル デザインを実装する必要があります。一番左の 2 つのセル (左/中央) は静的な幅になりますが、現在のウィンドウのサイズに基づいて動的な幅を持たせるには、右側の div が必要です。

マークアップは次のようになります。

<div class="wrapper">
    <div class="leftWrapper">
        <div class="left">left</div>
        <div class="mid">mid</div>
    </div>
    <div class="right">Lorem ipsum dolor sit amet, facilisi velit justo non. Pretium vestibulum nibh nonummy et a libero. Aptent consequat suscipit ridiculus leo pellentesque tempus, suspendisse pretium quis turpis. Euismod facilisi congue ab. Pretium ultricies non aliquam mi, cras sint, pede elit ligula aliquam in scelerisque ultricies, vitae dictum tincidunt sit, torquent eu et eros suspendisse. Voluptate nec curabitur et at nam non, diam vel, lorem nibh id condimentum a, laborum ornare, pede sem mattis. Numquam magna non metus sit fringilla, ligula quis cras, in lorem, praesent eros volutpat nisl vehicula tellus, egestas nullam. Pede aliquam donec.</div>
</div>

http://jsfiddle.net/mmZeN/。

display: table-cell を使用せずに、右側のセルを左側と中央のセルと同じ行にとどめ、同時にクッパの幅に基づいてサイズを変更するにはどうすればよいですか?

4

3 に答える 3

1

要素をフロートせず、.right要素と同じ幅のマージンを与えます。.leftWrapper

それが山車の美しさ..

http://jsfiddle.net/mmZeN/2/で更新されたデモ

于 2013-04-23T12:09:11.333 に答える
0

左と中央に静的な値がある場合は、css を使用して指定し、他の列をパーセンテージ値にすることができます。この場合、これは機能するはずです。

更新: 現在のプレースホルダー (DIV の場合もあります) の px を取得し、左と中央の列幅を差し引いて、幅のままにします。例: Xpx Xpx/コンテナーの合計幅 x 100 この値をパーセンテージで指定できます。

于 2013-04-23T12:03:22.207 に答える