只是想請教一下這個例子中的幾個問題：頁腳佈局和垂直分頻器
什麼是做這個三欄佈局，這些天的最佳方式是什麼？當然有桌子，現在有div等等等什麼最新完成這個最好的方法？如果完全取決於我，我會有一個容器分區，其中包含3個其他分區。設置爲width: 33%;和display: inline;
另外，如何獲得這些垂直分隔線？再次據我所知，你在表格中使用它，只顯示你獲得垂直規則效果的某些邊界。
但是爲了獲得這種效果，現在最好的方法是什麼？在您的工具箱中有html5和css3 ..
在此先感謝！
試試這個
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
結帳Twitter的引導（http://twitter.github.com/bootstrap/），古比框架（http://gumbyframework.com/）
這些框架可以提供您的單槓現成的功能。否則使用邊界。將所有邊界除權顏色
做列的CSS3的方式透明使用"column-*" family of properties
他們現在被所有主流瀏覽器支持，應該與他們沒有任何問題。
就我個人而言，我在home site中使用了這些樣式，它們提供了相當靈活（可能有一些小缺點）佈局格式。
不支持在鏈接中所述的IE。 –
@KhurramIshaque：問題是關於最新的技術。 IE需要做什麼？ ：P – johnfound
，因爲使用css3列的網站內容不會針對IE用戶顯示。 –
最好的方法取決於你想要達到的目標。列的行爲應該如何調整窗口大小等
如果我在圖片上做的事情，我可能會使用固定的寬度，所以我可以控制文本的線寬。
通過使用inline-block的，你可以做到這一點的崩潰，並在對方放一個小屏幕上（如手機）
揣摩AOUT所需的行爲第一列。
編輯：哎呀，我誤讀和困惑與垂直水平;-)我認爲其他答案解釋他雖然夠了。
糾正我，如果我錯了，但我認爲css3列屬性是爲同一文本正文的多個列。
謝謝你解答答案。這確實取決於你想要的功能。另外，正如你所說，列屬性是用來製作同一文本主體的列。所以在這種情況下可能不是最好的選擇。 – Tiwaz89
我建議使用box-sizing: border-box; （標準CSS框模型的替代方法）。
box-sizing: border-box;是做什麼用的？如果您定義div的寬度（例如33％）並添加邊框和填充，則它會影響計算出的div的長度。它仍然是33％的家長（33％ - （邊界+填充））。
標準框模型將它們添加到33％（在我們的例子中爲33％+邊框+填充）的計算中。
HTML標記：
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS：
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
的jsfiddle演示：http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
你是什麼意思「水平分隔線」？只看到垂直的。 –
@RainDiao - 啊！我的意思是垂直，對不起，我會盡快改變它。 – Tiwaz89