簡單的3列流體佈局，但中心列空的固定寬度？

挑剔尋找最具跨瀏覽器兼容性的解決方案（包括IE6）。簡單的3列流體佈局，但中心列空的固定寬度？

三根柱子，兩側兩側響應並調整屏幕。

中間一列應該是空，但有固定寬度：

enter image description here

這很容易使他們所有響應：http://jsfiddle.net/Baumr/sZehH/2/（在這種情況下，中間是不是即使是一列，但只是一個保證金 - 這很好）。

<section> 
    <div> 
     <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p> 
    </div> 
    <!-- Best if Column 2 is a margin or something --> 
    <div> 
     <p>Column 3, lorem blops dolor bla laa cats and dogs</p>       
    </div> 
<section>

我使用position:考慮，但它會導致混亂......

任何想法？提前致謝。

來源

2012-10-28 Baumr

有關使用內部元件的間隔是什麼？可能是每列內的另一個DIV標籤：

http://jsfiddle.net/sZehH/3/

HTML：

<section> 
    <div class="left"> 
     <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p> 
    </div> 

    <div class="right"> 
     <p>Column 3, lorem blops dolor bla laa cats and dogs</p>       
    </div> 
<section>

CSS：

section div { 
    float: left; 
    width: 50%; 

} 

section div p { 
    background: pink; 
    padding: 2.5%;  
} 

.left p { 
    margin-right: 20px; 
} 

.right p { 
    margin-left: 20px; 
}

我用過的段落，其中已經存在，但你可能會有多個元素，所以你將不得不添加一個包裝元素來解決這個問題。

來源

2012-10-28 03:46:48 rcdmk

啊，好主意！我認爲我們有一個勝利者。雖然我認爲IE6不會喜歡邊緣（當然沒有理由）？ **另外**，而不是一個包裝元素，我可以做一個全面的CSS參數（例如'.right p，.right h1，.right div {margin-left：20px;'}），對嗎？ – Baumr

**更新：**它似乎只適用於'div'：http://jsfiddle.net/Baumr/sZehH/4/ - 它會得到一個白色邊距而不是粉紅色。在這種情況下，我無論如何都不會有'div'，但我很好奇這個問題。 – Baumr

**解決**有一些'overflow：hidden' - http://jsfiddle.net/Baumr/sZehH/5/ – Baumr

我建議你使用像YAML這樣的健壯的CSS框架。

它使您可以開發具有2列或3列柱狀響應佈局。因此，您可以專注於藝術和發展，而不是試圖解決跨平臺問題。

檢查了這一點： http://www.yaml.de/demos/flexible-columns.html

來源

2012-10-28 03:42:36

用戶沒有按」 t似乎一直在要求圖書館的建議 –

Andrew的權利，但感謝Daniel - 這是一個很好的框架！ – Baumr

我認爲最好的解決方案是盒子大小。雖然舊版瀏覽器沒有技術支持，但確實有polyfills。

退房the fiddle以下幾點：

CSS（不包括供應商前綴）：

html, body { 
    background: #000; 
    height: 100%; 
    width: 100%; 
    color: #000; 
}  

#columnOne, #columnTwo { 
    width:50%; 
    height: 100%; 
    background: #fff; 
    box-sizing: border-box; 
} 

#columnOne { 
    float:left; 
    border-right: 20px solid blue; 
} 

#columnTwo { 
    float: right; 
    border-left: 20px solid blue; 
}

HTML：

<html> 
    <body>   

     <div id="columnOne">HI!</div> 
     <div id="columnTwo">HI!</div> 

    </body> 
</html>

更多信息here和polyfills here信息。

玩得開心！

來源

2012-10-28 03:57:09 apttap

給我的消息：D看起來很酷！謝謝。一個問題，我剛添加'* {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;}'到我的CSS，但是頁面上沒有任何明顯的變化。據我瞭解，不是所有元素都變小了嗎？提前致謝。 – Baumr

我真的很喜歡你的解決方案Apttap，雖然這似乎更容易：http://jsfiddle.net/Baumr/sZehH/5/ - 但它會混合？（即IE6） – Baumr

您使用的瀏覽器是什麼？您已將哪些屬性分配給您的列？如果沒有填充或邊框，則不會改變大小。另一種解決方案確實是可行的，但邊界框的東西似乎更有語義。 – apttap

鑑於您嚴格的瀏覽器支持要求，您可能需要使用非語義tables。這個table解決方案雖然可能已經知道，但可以在this JSFiddle或更低版本上查看。哦，我沒有測試過，但據我所知，這一切應該是IE6兼容：

HTML：

<table> 
    <tr> 
    <td class="column"> 
     <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p> 
    </td> 
    <td class="center-column"><div id='ie6-fix'></div></td> 
    <td class="column"> 
     <p>Column 3, lorem blops dolor bla laa cats and dogs</p>       
    </td> 
    </tr> 
<table>

CSS：

.column { 
    background: pink; 
} 
.center-column { 
    background-color: #eee; 
    width: 100px; 
    min-width: 100px; 
} 
#ie6-fix { 
    width: 100px; 
}

來源

2012-10-28 07:39:00 jmeas

謝謝Jmeas！當我看到「桌子」時我很懷疑，但是我發現這個很乾淨。將嘗試並報告。 – Baumr

簡單的3列流體佈局，但中心列空的固定寬度？

回答

相關問題