私はそのようなものを持っています：
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>両方のフロートが必要です。コンテンツdivを画面全体に加え、メニューの100pxを差し引かないようにします。floatを使用しない場合、divは正確に拡張されます。しかし、フロートが設定されているときにこれをどのように設定しますか？のようなsthを使用する場合
style=width:100%次に、コンテンツdivは、本体または私が試した別のdivのいずれかである親のサイズを取得します。そのため、もちろん、メニューの右側に適合しないため、以下に表示されます。
回答:
私があなたを正しく理解したことを願って、これを見てください：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>これを行うために私が見つけた最も互換性のある方法は、あまり明白ではありません。2番目の列からフロートを削除して適用する必要がありますoverflow:hidden。これにより、divの外にあるコンテンツはすべて非表示になっているように見えますが、実際には、divが親の内部に留まるように強制されます。
あなたのコードを使用して、これはそれがどのように行われることができるかの例です：
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>これがこの問題を抱えているすべての人に役立つことを願っていますが、他の解像度に調整するように試みた後、私が構築しているサイトに最適に機能することがわかりました。残念ながら、divコンテンツの後に右フローティングを含めると、これは機能しません。それを機能させるための適切な方法を知っている人がいて、IEとの互換性が良好であれば、私はそれを聞いてとても幸せです。
display: flex;Flexboxモデルはかなり広く実装されているのでflex、レイアウトをより使いやすくするため、実際にはFlexboxモデルを使用することをお勧めします。オリジナルのような単純な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>.content .right{
overflow: auto;
background-color: red;
}Merkuroの+1。ただし、フロートのサイズが変更された場合、固定マージンは失敗します。右側のCSSの上を使用するdivと、左側のフロートのサイズが変化するため、サイズが適切に変化します。そのように少し柔軟です。ここでフィドルを確認してください：http : //jsfiddle.net/9ZHBK/144/
overflow: hiddenとoverflow auto同じ動作になります。人々はフィドルを高く評価しているとも思います。
フロートされた要素は通常のフローレイアウトから除外され、DIVなどのブロック要素は親の幅を超えなくなります。この状況ではルールが変わります。ホイールを再発明する代わりに、このサイトをチェックして、目的の2列のレイアウトを作成するためのいくつかの可能な解決策を確認してください。http：//www.maxdesign.com.au/presentation/page_layouts/
具体的には、「液体2列レイアウト」。
乾杯！
これは、「フローティング」が気に入らず、気に入らない場合のHTML 5の更新済みソリューションです。
この場合、テーブルとテーブルセルに固定幅を設定できるため、テーブルは適切に機能します。
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}http://jsfiddle.net/EAEKc/596/ @merkuroの元のソースコード
この使用法で問題が解決する場合があります。
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>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では壊れているように見える場合があります。
受け入れられた答えはうまくいくかもしれませんが、マージンを重ねるという考えは好きではありません。HTML5では、これをで行いdisplay: flex;ます。クリーンなソリューションです。1つの要素とflex-grow: 1;動的要素の幅を設定するだけです。メルクロスフィドルの編集バージョン：https ://jsfiddle.net/EAEKc/1499/
こんにちは、正しい要素にオーバーフロー非表示メソッドを使用する簡単な方法があります。
.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>