web-dev-qa-db-ja.com

ピクセル幅とパーセント幅のCSSサイドバイサイドdiv

親div内に2つのdivが（並んで）あります。右側のdivが残りのスペースの100％（つまり、100％-200px）を占めるようにし、常に左側のdivの隣（左側のdivの下ではない）にとどまる必要があります。

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>
htmlcssfluid-layout
19
Faizal Balsania

固定幅の列は1つしかないので、左にフロートさせてください。 2列目は、floatとwidthを指定しないでください。これにより、幅が100％になります。ただし、左マージンを追加する必要があります。そうしないと、2番目のカラムがフロートカラムと干渉します。

  • アクアの背景は青い背景の後ろに表示されます（青い背景をオフにして意味を確認してください）
  • 2番目の列が最初の列よりも高くなると、追加のコンテンツが最初の列の下に表示され始めます。
<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>
40
Salman A

親ラッパーをfloatにします。また、2番目の子divのwidth: 100%を削除することもできます。そして、その幅は内部のコンテンツの量によって設定されます。または、両方の子divのパーセンテージを設定することもできます。例30%および70%。

デモはこちら

2
erickb

右側のdivに位置プロパティを追加します。左のdivは200px、右のdivは残りのスペースを占めます。

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

http://jsfiddle.net/EpA5F/1/ で作業例を確認してください

2
Hussein

さて、新しいブラウザでは、display：box;を使用できるようになります。およびbox-flex：1、...プロパティ。私は現在、Chromeのみが必要なWebプロジェクトでこれを使用しているので、この新しいCSS3のものは、私にとって多くの問題を解決しました。

1
Guillaume Schuermans

右のdivの幅を一定にしたい場合：

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

そしてCSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

国境がなくてもうまくいく

JSFiddle

0
ZuzEL

左のdivは、相対位置を使用して、floatleftとそのピクセル幅を持つ必要があります。右のdivは相対的な位置のみを持ち、オーバーフローは非表示になっている可能性があります。これで問題が解決するはずです。フロートをクリアするdivを使用する必要はありません。

0
Guillaume Schuermans

受け入れられた答えは良いですが、右側の列もフローティングであるため、サブナビゲーションがアンダーラップするという問題がありました。

最新のブラウザでは、すべての要素をフローティングにして、よりクールなCSSで同じ効果を得ることができます。 「width：calc（100％-380px）;」を使用するつまり、要素をフロートさせ、適切に配置し、見栄えを良くすることができます...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

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

0
Colin Wiseman