關於CSS，px和百分比寬度混合的簡單qst？ [與影像]

Question

我有這個小問題：

我如何才能填補所有的空間設置寬度上第二個框，用橙色框計算？

感謝

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。