帶圓角的3列布局

Question

我試圖讓東西看起來像這樣： http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html 但沒有任何JS或CSS黑客入侵。

也試過這樣： http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm

和許多其他的例子，但它們都沒有效果很好。

我想左邊和右邊的列是固定寬度（比如說300px），中間一列是剩下的頁面。

不確定是否有人可以幫忙..？

謝謝！

編輯：他們需要有相同的高度（沒有指定高度），即。所有3列的高度應與最高的列相同。

Answer 1

爲了使圓角的圓你必須使用CSS，只是去 http://www.w3schools.com/css3/css3_borders.asp 這不是一個黑客我相信。

Answer 2

編輯：

爲了您的佈局是fluit我添加％至寬度：

http://jsfiddle.net/qBH3A/3/

CSS：

h1{ 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#container{ 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: grey; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: hidden; 
} 

#header{ 
    background-color: green; 
    width: 100%; 
    margin: 0 auto; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#left{ 
    background-color: yellow; 
    float: left; 
    width: 20%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 

} 

#right{ 
    background-color: blue; 
    float: right; 
    width: 20%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#center{ 
    background-color: red; 
    width: 58%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
    float: left; 
    margin-left: 10px; 
} 

---

我做了一個簡單的例子爲一個960像素的網格佈局：

http://jsfiddle.net/qBH3A/1/

我只是將值設置爲最大寬度和寬度。

HTML：

<div id="container"> 
    <div id="header"> 
    <h1>header</h1> 
    </div> 

    <div id="left"> 
     <h1>Left</h1> 
    </div> 

    <div id="right"> 
     <h1>right</h1> 
    </div> 

    <div id="center"> 
     <h1>center</h1> 
    </div> 
</div> 

CSS：

h1{ 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#container{ 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: grey; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: hidden; 
} 

#header{ 
    background-color: green; 
    width: 100%; 
    margin: 0 auto; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#left{ 
    background-color: yellow; 
    float: left; 
    width: 200px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#right{ 
    background-color: blue; 
    float: right; 
    width: 200px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#center{ 
    background-color: red; 
    width: auto; 
    max-width: 540px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

請注意，我用的10px的邊界半徑;

希望這是你想要的。