116

私はそのようなものを持っています:

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

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

style=width:100%

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

4

10 に答える 10

142

私があなたを正しく理解していることを願っています。これを見てください：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>

于 2009-06-19T13:27:39.360 に答える
102

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

あなたのコードを使用して、これはそれがどのように行われるかの例です:

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

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

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

Flexbox モデルはかなり広く実装されているので、代わりに Flexbox モデルを使用することをお勧めしflexます。元のような単純な 2 列を次に示します。

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

そしてこちらは幅が自在なセンターコラム付きのスリーコラム！

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
于 2012-04-10T22:07:34.457 に答える
31

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

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

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

于 2013-02-28T07:57:01.780 に答える
6

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

具体的には、「Liquid Two-Column レイアウト」です。

乾杯！

于 2009-06-19T13:26:33.280 に答える
4

これは HTML 5 の更新されたソリューションで、「フローティング」に興味があり、気に入らない場合に役立ちます。

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

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

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

http://jsfiddle.net/EAEKc/596/ @merkuro のオリジナル ソース コード

于 2014-03-04T10:14:39.057 に答える
3

のソリューションに基づいて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 では壊れているように見える場合があります。

于 2010-12-12T15:04:28.673 に答える
1

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

于 2015-04-19T13:33:05.230 に答える
-1

これはうまくいくかもしれません： 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
于 2014-09-25T01:06:27.323 に答える