3列CSS液體佈局，左右邊緣與父元素邊緣齊平？

Question

如何創建3列CSS佈局，左右邊緣與父元素的邊緣齊平？我希望能夠在液體佈局中做到這一點，所以沒有固定的寬度。

這聽起來應該很容易，但我能想出的最好的東西是相當黑客。

<style> 
.c3 { display:block; text-align:center; } 
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; } 
.c3 .left { float:left; } 
.c3 .right { float:right; } 
</style> 

...

<span class="c3"> 
    <span class="left"> ... 
    </span> 
    <span class="center"> ... 
    </span> 
    <span class="right"> ... 
    </span> 
</span> 

你可以看到它here，這（至少在我的瀏覽器）的作品不錯，但它只是感覺不對。有一個更好的方法嗎？

由於似乎有什麼我想要做的混淆，這裏是在上下文中。我經常遇到這種情況，我已經有了一個頁面佈局，並且我希望在該佈局中有三列。我希望這三列「完全正確」，我希望事情變得流動，因爲即使認爲頁面有固定的佈局，通常也有一個Facebook應用或其他東西，我也希望儘可能重用。這裏是我跑到這裏（頁面底部）的latest example。

我不擔心搜索引擎優化，內容通常在1-2-3的重要性順序。我真的不在乎它們的長度是否相同。如果可能的話，我不想使用大量的標記。我的主要目標是讓左邊和右邊與父元素齊平，並在每列之間留出相等的空間。

Answer 1

據我所知，我在問題中給出的解決方案是最好的答案。自發布此信息後，我還沒有發現任何其他建議，可以達到我想要的效果。

我會在這裏重申，這樣可以關閉問題。

<style> 
.c3 { display:block; text-align:center; } 
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; } 
.c3 .left { float:left; } 
.c3 .right { float:right; } 
</style> 

...

<span class="c3"> 
    <span class="left"> ... 
    </span> 
    <span class="center"> ... 
    </span> 
    <span class="right"> ... 
    </span> 
</span> 

Answer 2

我可以嘗試寫一個新的佈局，爲您或您修復的開始，但我覺得我應該只是指向你的良好來源的佈局你後：

完美3列液體佈局（百分比寬度）

沒有CSS hack。 SEO友好。沒有圖像。沒有JavaScript。跨瀏覽器& iPhone兼容。

http://matthewjamestaylor.com/blog/perfect-3-column.htm

我已經使用這個資源多年，它是堅如磐石，即使是在IE6。請務必點擊以查看所有示例，然後閱讀文章，以瞭解其工作原理。

這是基本的佈局結構（未實際輸出）的圖像：

它使用一些狡猾相對定位和SEO友好2-1-3源順序。全高人造色譜柱，固定寬度或流體色譜柱...

我不能推薦這個資源，我希望你喜歡它。

---

好吧，聽起來你只是想要一個輕量級的替代你已經工作的解決方案。

根據我們的討論中聊天，我張貼的小模板我創建：

<div class="wrapper"> 
    <div>1</div> 
    <div>2</div> 
    <div class="last">3</div> <!-- or use CSS3 :last selector --> 
</div> 

.wrapper { 
    width:500px; /* any width OK */ 
    float:left; 
} 

.wrapper div { 
    width:30.65%; /* not perfect, but close */ 
    padding:1%; 
    margin:0 0 0 1%; 
    float:left; 
} 

.wrapper div:first-child { margin:0; } 

/* make up for imperfect 1/3 width rounding */ 
.last { float:right;margin:0 } 

演示：http://jsfiddle.net/bH8vY/2/

好運。

Answer 3

這可能是你想要/幫助你;我做了一個佈局，使用css來模擬動態table行爲[使用div s]。它適用於Chrome，Firefox和IE> 7。

DEMO，有一個去調整窗口的大小。那個middle位是你想要的，我想。

有一個fiddle與它。取消對border css行的註釋以查看正在發生的事情。

代碼：

<div class="view" style="height:100%; width:100%"> 
    <div class="north"> 
     n 
    </div> 

    <div class="middle"> 
     <div class="west"> 
      w 
     </div> 

     <div class="centre"> 
      c 
     </div> 

     <div class="east"> 
      e 
     </div> 
    </div> 

    <div class="south"> 
     s 
    </div> 
</div> 

html, body { 
    height : 100%; 
    margin : 0; 
} 

.view, 
.view > .middle { 
    display : table; 
} 

.view > .north, 
.view > .south { 
    height : 1px; 
    display : table-row; 
} 
.view > .north { vertical-align : top; } 
.view > .south { vertical-align : bottom; } 

.view > .middle > div { 
    display : table-cell; 
} 
.view > .west, 
.view > .east { 
    width : 1px; 
} 

/*div { border : 1px solid black; }*/ 

簡單的標記，沒有JS和動態佈局。