DIV横向排列_CSS让多个div盒子并排同行显示

參考自: http://www.divcss5.com/wenji/w472.shtml

一、使用css float并排显示

<style>
    div {float:left}
</style>

二、使用css display同行显示 

<style>
    div {display:inline}
</style>

===============================

如果有三個div，分別為left , middle,  right

而left與right的寬度是固定的，要依照不同的解析度將 middle 自動填滿剩餘的部分

做法如下

<divclass='container'>
    <divclass='right'>
        col3
    </div>
    <divclass='left'>
        col1
    </div>
    <divclass='middle'>
        col2
    </div></div>


.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

特別注意div排放的順序, middle要擺在最後面一個

轉自http://stackoverflow.com/questions/7292021/3-columns-middle-one-with-flexible-width