圆角的3列布局

Question

我试图让一些东西看起来像这样：http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html，但没有任何JS或CSS hack。

我也尝试过这个：http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm

还有很多其他的例子，但是没有一个运行得很好。

我希望左边和右边的栏是固定的宽度(比如300px)，中间的栏占据页面的其余部分。

不知道有没有人能帮上忙？

谢谢！

编辑:他们需要是相同的高度(不指定高度)，即。所有3根柱子的高度都应该与最高的柱子相同。

Answer 1

要使div的边角变圆，你必须使用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;
}

我为960px的网格布局做了一个简单的例子：

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

我只是将值设置为max-width和width。

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的边界半径；

希望这就是你想要的。