0

2 つの div を並べて作成したいのですが、左側の 1 つを 300px にし、右側の 1 つを画面の残りの部分を占めるようにしたいです。それはどのように可能でしょうか？ありがとう！

4

5 に答える 5

1

1 つの解決策は、幅の広いfloat: left;左側に、次に右側に適用することです。基本的な概要は次のとおりです。div300pxoverflow: hidden;div

HTML:

<div class = "left">
    Glee is awesome!
</div>
<div class = "right">
    Glee is awesome!
</div>

CSS:

.left {
    width: 300px;
    float: left;
}
.right {
    overflow: hidden;
}

そしてちょっとしたデモ: little link .

于 2012-09-08T19:31:54.003 に答える
1

これは、新しいブラウザー (IE ではない) 向けのものです。

CSS :

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

<strong>HTML:

<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>​

デモ: http://jsfiddle.net/N5zhH/1/

于 2012-09-08T19:33:04.893 に答える
1

これで十分です。

<div style="overflow: hidden;">
    <div style="width: 300px; float: left;"></div>
    <div style="margin-left: 300px;"></div>
</div>
  • overflow: hidden最も背の高い子要素に対応するためにコンテナ div を引き伸ばします
  • float: left要素を左にフロートします (doh!)
  • width: 300px一緒に、右の列が左よりも高い場合、左のフローティング div の下margin-left: 300pxにフローしないことを保証します。コンテナ div の左端から 300x のギャップを維持します

ヒント: に変更しmargin-left: 320pxて 20px の余白を追加します

ここに素敵な小さなデモがあります

于 2012-09-09T14:59:34.693 に答える