CSS顯示三列內容

我想獲得三列輸出使用<div>爲每個。CSS顯示三列內容

現在我左邊的div排好了，甚至是中間的一個，但是當我嘗試正確的時候，它只是裁減。

CSS

/* left div */ 
#left-sidebar, #right-sidebar { 
    width:15%; 
    height:700px; 
    float: left; 
    padding-left: 15px; 
    padding-top: 20px; 
} 

/* middle div */ 
#mid-content { 
    width:75%; 
    padding-left: 30px; 
    padding-top: 20px; 
} 

/* right div */ 
#right-sidebar { 
    float:right; 
}

來源

2013-11-09 arpymastro

您的權利DIV應該是隻有10％或更低，在你的CSS – medBo

如果你改變這些值加起來爲100％會發生？目前，75％，15％和15％合計達105％。

來源

2013-11-09 20:44:29 ksu

也許105 ??指定它）））） –

@AndrewEvt哈哈，在同一篇文章中的另一個錯誤計算:)感謝提示。我編輯了答案。 – ksu

操縱我的計算..在100％了..但仍然存在問題，我 – arpymastro

發生這種情況是因爲根據CSS box model，元素的大小是其寬度，邊框和填充的總和，因此 - 您的內容+填充超過了100％。

爲了解決這個問題，只需添加

box-sizing: border-box;

給您的欄，它會重新計算所需的寬度與考慮上述一起。

另外，您可能會考慮將元素浮動到相同的方向，即左側，因爲方塊大小的東西可能會被拋出。

我在這裏做一個工作示例：http://jsfiddle.net/v6peK/

來源

2013-11-09 20:50:49 silicakes

不會建議，使用盒大小，我知道這是在所有主流瀏覽器的支持，但它是不好的做法。 – andershagbard

嘗試，但仍不能有效地將近兩年了服務 – arpymastro

它是由保羅·愛爾蘭贊同：http://www.paulirish.com/2012/box-sizing-border-box-ftw/和個人經驗 - 我求不同，但是我想問問你是怎麼想的？ – silicakes

首先，你elemnents起來都增加105％。其次，您已將填充添加到具有％指定寬度的浮動元素，這不是一個好主意。看看http://www.w3schools.com/css/css_boxmodel.asp

這裏是一個解決方案http://jsfiddle.net/Ru6CL/

#left-sidebar, 
#right-sidebar, 
#mid-content { 
    float:left; 
} 

#left-sidebar, 
#right-sidebar { 
    width: 15%; 
    background-color: red; 
} 
#mid-content { 
    width: 70%; 
    background-color: blue; 
}

記得用clear: both;

來源

2013-11-09 20:52:54 andershagbard

@KyleMit我做了修改，但仍然右欄剪輯下來..也請告訴我在哪裏，以及如何使用明確的：既 – arpymastro

@KyleMit我應該使用一個表放置在每一個相應的coloumns所有的div ????我的左側欄包含一個導航面板，就像我們將鼠標懸停在其上時一樣，子導航向左漂移，然後是中間內容，然後又是右側邊欄... – arpymastro

您不應該使用表格進行設計。表是用於數據。你可以嘗試製作一個jsfiddle版本的頁面，以便我們可以看到它嗎？ – andershagbard

CSS顯示三列內容

回答

相關問題