0

我试图让一些东西看起来像这样： 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

和许多其他示例，但没有一个效果很好。

我希望左列和右列是固定宽度（比如 300 像素），中间列占据页面的其余部分。

不确定是否有人可以帮助..？

谢谢！！！

编辑：它们需要具有相同的高度（不指定高度），即。所有 3 列应与最高列具有相同的高度。

4

2 回答 2

0

要使 div 的角变成圆形，您必须使用 css 并访问 http://www.w3schools.com/css3/css3_borders.asp 我相信这不是 hack。

于 2013-08-12T07:37:05.843 回答
0

编辑：

为了使您的布局流畅，我在宽度上添加了 % ：

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/

我只是将值设置为最大宽度和宽度。

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

希望这是你想要的。

于 2013-08-12T07:53:21.643 回答