19

親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>

4

7 に答える 7

41

固定幅の列が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>

于 2011-03-17T07:50:20.007 に答える
2

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

こちらのデモ

于 2011-03-17T07:46:31.067 に答える
2

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

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

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

于 2011-03-17T07:51:13.193 に答える
1

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

于 2011-10-02T23:15:30.573 に答える
1

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

最新のブラウザでは、すべての要素をフローティングにして、よりクールな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/

于 2014-01-16T15:10:27.353 に答える
0

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

于 2011-03-17T07:45:25.853 に答える
0

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

于 2015-04-07T20:03:58.963 に答える