divに右の "空きスペース"を取らせますか？

Question

次のコードでは、コンテナdivの右上に橙色（class="Inner3"）を挿入しようとしています（空き領域があるため）。 floatを使用して試してみてdisplay:inline-blockで試してみましたが、うまくいきませんでした。誰も私にそれを行う方法を示すことができますか？

ありがとうございます。

.OuterDiv { 
 
    width: 1000px; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #E3EAD7; 
 
    height: 1000px; 
 
} 
 
.Inner1 { 
 
    width: 600px; 
 
    background-color: #6D97C0; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    float: left; 
 
} 
 
.Inner2 { 
 
    width: 600px; 
 
    background-color: #ECB7D8; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    float: left; 
 
} 
 
.Inner3 { 
 
    width: 300px; 
 
    background-color: #F5E6AD; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    float: left; 
 
}

<div class="OuterDiv"> 
 
    <div class="Inner1"></div> 
 
    <div class="Inner2"></div> 
 
    <div class="Inner3"></div> 
 
</div>

Answer 1

[OK]をだから何あなたのケースで起こっている：あなたは（float:leftとして3つのすべてのdivを設定している単一の行で隣同士にそれらを整列させます）、あなたは親に固定幅を置いています（これは結合幅では不十分です）。そのため、2つのdivが次の行にあり、依然として互いに結び付けられています。

なぜあなたはInner3からfloat: leftを削除するか、あなたは `.outerDiv`の幅内の要素の「理想的なフィット」を計算する方法を探している親

Answer 2

.Inner3クラススタイルから幅とフロートプロパティを削除し、それが動作します。

.Inner3 { 
    background-color: #F5E6AD; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 
    height: 300px; 
} 

以下の完全な例を参照してください。

.OuterDiv { 
 
    width: 1000px; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #E3EAD7; 
 
    height: 1000px; 
 
} 
 
.Inner1 { 
 
    width: 600px; 
 
    background-color: #6D97C0; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    float: left; 
 
} 
 
.Inner2 { 
 
    width: 600px; 
 
    background-color: #ECB7D8; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
    float: left; 
 
} 
 
.Inner3 { 
 
    background-color: #F5E6AD; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 400px; 
 
}

<div class="OuterDiv"> 
 
    <div class="Inner1"></div> 
 
    <div class="Inner2"></div> 
 
    <div class="Inner3"></div> 
 
</div>

Answer 3

あなたはラッピングdivの中に最初の2 Innerのdivのをラップしていることにfloat: leftの性質を与えることができます。

シナリオの正確なコンテキストが分からないため、以下の点は完全ではありません（この例では静的な幅をパーセンテージに変換していますが）できる？

.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
/** 
 
* For IE 6/7 only 
 
* Include this rule to trigger hasLayout and contain floats. 
 
*/ 
 
.cf { 
 
    *zoom: 1; 
 
} 
 

 
.OuterDiv { 
 
    width: 1000px; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #E3EAD7; 
 
    height: 1000px; 
 
} 
 
.wrap { 
 
    width: 70%; 
 
    float: left; 
 
} 
 
.Inner1 { 
 
    background-color: #6D97C0; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 
.Inner2 { 
 
    background-color: #ECB7D8; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 
.Inner3 { 
 
    width: 30%; 
 
    background-color: #F5E6AD; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    height: 400px; 
 
    float: left; 
 
}

<div class="OuterDiv"> 
 
    <div class="wrap cf"> 
 
    <div class="Inner1"></div> 
 
    <div class="Inner2"></div> 
 
    </div> 
 
    <div class="Inner3"></div> 
 
</div>

Clearfixソース：http://nicolasgallagher.com/micro-clearfix-hack/