推 hsuchien:感謝分享~我也為這問題困擾很久~都用table或圖片掩飾 09/08 10:26
推 lf2com:推! 這寫法好棒!! 09/08 16:29
※ 引述《evenwu (EvenWu)》之銘言：
: ※ 引述《davidou (老歐 ! 月夜雪嵐)》之銘言：
: : 我用css來排我的版面 用div的方式
: : 我的程式碼是這樣
: : [前略..]
: （中間略）
: : 不管用php的方式還是怎樣都好
: : 因為內容大小不一定 所以我也不可能給內容那邊一個固定的高度
: : 還是說有其他更好的表現方式
: : 當然目前我唯一想到的就又是回去用table排版的...
: 其實這個東西，真的是CSS的缺點
: 這時我們也不必太強求一定要完全CSS
: CSS3有幾種辦法來實現這個排版
: http://www.w3.org/TR/css3-flexbox/
: http://www.w3.org/TR/css3-layout/
: 搭配 display: table
: 也可參考這篇文：
: http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
: 但缺點就是相當難以hack讓所有瀏覽器通吃
: 另一個方法就是用背景重複圖片，但我覺得原po可能不是要這個解法。
剛剛試了一下純css的解法
http://evendesign.tw/demo/test2col.html
這個解法應該是沒有長度的問題了
無論主要內容或側邊內容，哪一邊比較多都沒有問題
多reload幾次可以看到左右塞不同文字的結果
.container {
width: 750px;
margin: 0 auto;
background: #ccc;
position: relative;
overflow: hidden;
}
.container .inner {
width: 750px;
background: #ffc;
position: relative;
right: 250px;
}
#main {
float: left;
width: 480px;
padding: 10px;
position: relative;
right: -250px;
}
#sidebar {
float: left;
width: 230px;
padding: 10px;
position: relative;
right: -250px;
}
<div class="container section">
<div class="inner section">
<div id="main">
主要內容
</div><!-- /main -->
<div id="sidebar">
側邊內容
</div><!-- /sidebar -->
</div>
</div>
比較精準的設定請看html原始碼
http://evendesign.tw/demo/test2col.html
多reload幾次可以看到左右塞不同文字的結果
寬度不滿意的話，其中數值可隨你調整
但記得一樣數字的地方都要記得調
例如250與-250有好幾個，調整要一起
還有總寬這是750，所以兩旁分配為500,250
也要記得算一下
已經測過ie6,ie7,ie8都沒問題
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.160.24.167