以寬度百分比顯示內聯塊

我試圖將兩個部分放在一起使用inline-block和寬度作爲百分比，但它沒有填滿我窗口的整個寬度。以寬度百分比顯示內聯塊

我到目前爲止有：

HTML

<section class="left-content"> 
    "Some Code" 
</section> 
<section class="main-content"> 
    "Some More Code" 
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
} 
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

但除非我制定出具體的比例下降到我的屏幕上的小數點它不工作。有誰知道使用inline-block這樣做的方法，還是我必須使用float？

來源

2013-09-21 dpDesignz

我發現它通常是因爲元素之間存在物理空間。您可以刪除標記中元素之間的任何空格，也可以在父級上設置「font-size：0」，然後在元素本身中恢復字體。 – Chad

這是由於您的HTML標記中導致此問題的空白和換行符。有解決的「問題」兩個選項：
1.從你的代碼
2.設置父元素的font-size「0」

除去換行和空白另外有你設置box-sizing: border-box ？

來源

2013-09-21 14:20:04 Netsurfer

謝謝你。只是一個痛苦，我不得不重置字體大小。 :) – dpDesignz

是的;-)但沒有任何方法沒有任何缺點。使用'浮動'的替代方式並不是更好......！你可以選擇兩種邪惡中的一種。 – Netsurfer

感謝您指出我在正確的方向，但爲什麼不只是刪除HTML中的空白。在他的情況下：[code] ...

... [更多代碼] –

以寬度百分比顯示內聯塊

回答

相關問題