我的左側佈局爲div.left，寬度爲40px，右側爲div.right，寬度爲100％，以填充剩餘的父容器空間。處理CSS剩餘部分時避免元素重疊

HTML：

<div class="parent"> 
    <div class="left"> 
     L 
    </div> 
    <div class="right"> 
     R 
    </div> 
</div>

CSS：

.parent { 
    background: maroon; 
    max-width: 500px; 
} 
.left { 
    float: left; 
    background: green; 
    width: 40px; 
    opacity: 0.7; 
} 
.right { 
    width: 100%; 
    padding-left: 50px; 
    background: blue; 
}

Jsfiddle

是否有可能下一個到另一個填充在實現這一佈局（具有固定寬度的一個元件剩餘空間）沒有訴諸我目前使用的填充方法？我的問題是，我想在左浮動元素上使用透明背景，所以隱藏在這些元素下方的填充將可見。而且，我目前的方法不會流暢地縮小規模。

enter image description here

來源

2014-02-20 Marcatectura

對於您需要float: left;其他元件，以及..

.right { 
    width: calc(100% - 40px); 
    background: blue; 
    float: left; 
}

Demo

而且，現在用calc()這裏，扣除固定width側邊欄是40px從100%右吧。

enter image description here

由於@Krimson commented你想要的元素之間的一些空間，以及比使用margin

.right { 
    width: calc(100% - 80px); 
    background: blue; 
    float: left; 
    margin-left: 40px; 
}

Demo

注：在演示中，我使用overflow: hidden;作爲一個快速修復清理花車，但更好地使用clear: both;，欲瞭解更多關於清理浮筒的信息，你可以閱讀我的回答here。

視察元素

enter image description here

來源

2014-02-20 06:47:04

這不會工作。如果你注意到。 OP是增加了一個50px的填充，左邊的欄只有40px，這意味着他想要在中間的差距。爲兩個元素添加浮點數不會給差距 – Krimson

@Krimson爲什麼它不起作用？ HTTP：//的jsfiddle。net/4REh3/2/ –

您在演示中添加了餘量。你的答案中的CSS沒有：| – Krimson

如果u改變你的.right此：

.right { 
    /* width: 100%; remove width */ 
    margin-left: 50px; /* Margin instead of Padding */ 
    background: blue; 
}

的jsfiddle Demo

來源

2014-02-20 07:20:35 Krimson

處理CSS剩餘部分時避免元素重疊

回答

的jsfiddle Demo

相關問題