web-dev-qa-db-ja.com

float：leftが設定されているときにdivを最大幅に展開します

私はそのようなものがあります：

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

両方のフロートが必要です。コンテンツdivで、画面全体からメニューの100pxを差し引いたものが必要です。 floatを使用しない場合、divは正確に展開します。しかし、フロートが設定されているときにどのように設定しますか？私がsthを使うなら

style=width:100%

次に、コンテンツdivは親のサイズを取得します。これは、私が試したbodyまたは別のdivのいずれかであるため、もちろんメニューの右側に収まらず、以下に表示されます。

htmlwidth
113
Flo

私があなたを正しく理解したことを願って、これを見てください： http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
137
merkuro

私がこれを行うことで見つけた最も相互互換性のある方法は、あまり明らかではありません。 2列目からフロートを削除し、overflow:hiddenを適用する必要があります。これはdivの外側にあるコンテンツを隠しているように見えますが、実際にはdivをその親内にとどめます。

コードを使用して、これはどのようにそれができるかの例です：

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

これがこの問題を抱えているすべての人に役立つことを願っています。他の解像度に調整しようと試みた後、私が構築していたサイトに最適であることがわかりました。残念ながら、コンテンツの後に右浮きdivを含めた場合、これが機能しないのは、IE互換性が良好で、それを機能させる良い方法を誰かが知っていればそれを聞いてとても幸せです。

display: flex;を使用した新しい、より良いオプション

Flexboxモデルがかなり広く実装されたので、レイアウトでflexibilityをはるかに許可するため、実際に代わりに使用することをお勧めします。元のような単純な2列です。

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

そして、ここに幅の広い中央の列を備えた3つの列があります！

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
97
alanaktion

余白のサイズを固定しないソリューション

.content .right{
    overflow: auto; 
    background-color: red;
}

Merkuroの場合は+1ですが、フロートのサイズが変更された場合、固定マージンは失敗します。右のdivで上記のCSSを使用する場合、左のフロートのサイズを変更するとサイズが適切に変更されます。そのようにもう少し柔軟です。ここでフィドルを確認してください： http://jsfiddle.net/9ZHBK/144/

30
Wilt

フロートされた要素は通常のフローレイアウトから取り出され、DIVなどのブロック要素は親の幅を超えなくなります。この状況ではルールが変わります。車輪を再発明する代わりに、次の2つの列レイアウトを作成するためのいくつかの可能な解決策についてこのサイトをチェックしてください。 http://www.maxdesign.com.au/presentation/page_layouts/

具体的には、「液体2列レイアウト」。

乾杯！

6
Sean Aitken

これは、誰かが「フローティング」に興味がなく、「フローティング」が好きでない場合のHTML 5の更新されたソリューションです。

この場合、テーブルとテーブルセルに固定幅を設定できるため、テーブルはうまく機能します。

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ @merkuroの元のソースコード

4
Snowie

この使用法で問題が解決する場合があります。

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
4
suathd

merkuroのソリューションに基づいて、左側のソリューションを最大化する場合は、次を使用する必要があります。

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

IEではテストされていないため、IEでは破損しているように見える場合があります。

3
kubilayeksioglu

受け入れられた答えはうまくいくかもしれませんが、マージンが重なるという考えは好きではありません。 HTML5では、display: flex;でこれを行います。それはきれいな解決策です。 1つの要素の幅と動的要素のflex-grow: 1;を設定するだけです。 merkuros fiddleの編集バージョン： https://jsfiddle.net/EAEKc/1499/

1
Christoph Bühler

こんにちは、正しい要素にオーバーフロー隠しメソッドを使用した簡単な方法があります。

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
0
Sanjib Debnath