CSS、px、およびパーセンテージ幅の組み合わせについての簡単なqst！ [画像付き]

Question

私はこの小さな問題があります：私はオレンジ色のボックスに数え、すべてのスペースを埋めるために、2番目のボックスに幅を設定するにはどうすればよい

を？

おかげ

HTML：

<div class="parent"><div class="orange"></div><div class="blue"></div></div> 

CSS：

.parent{width:100%;} .orange{width:100px;} 

オレンジと青のボックスは、彼らがページからページへのサイズが異なる場合でも、同じでなければならない、ピクセル可能ならば完璧です。

Answer 1

最も簡単な解決策は、このマークアップを使用しています。

<div class="complete"> 
    <div class="orange"></div> 
    <div class="blue"></div> 
</div> 

あなたが.completeと.blueは彼らができるだけ多くの幅を使用するようになります非浮動ブロック要素になりたいが、あなたはまた.orangeにする必要があります浮動小数点数は.blueと同じ行になり、隠されたオーバーフローを使用して.blueが重複しないようにします。

.complete { overflow : hidden } 
.orange { float : left ; width : 100px } 
.blue  { overflow : hidden } 

オレンジと青の間に小さなスペースを残す必要がある場合は、オレンジ色のボックスに右余白を追加します。

このソリューションでは、青色とオレンジ色のボックスの高さが異なることに注意してください。ボックスの高さが同じでなければならないグラフィカルな効果（背景など）がある場合は、より巧妙なCSSが必要になります。