0

我从这里开始关注圣杯 3 列液体布局，我正在尝试使用新的 css 技术绕过角落，但我无法让左上角正常运行。拐角在外面是圆的，但是里面还有一个不是圆的div，它把圆角戳出来了。我相信这可能是因为所有的边距切换等等，但我在完成这个布局方面并没有取得太大的成功。

我应该提一下，只有在这一点上，角落才能在 Firefox 中正常工作，而且我显然需要它们在所有现代浏览器中工作（IE 可能是一个例外——我更需要 chrome、opera 和 safari 支持）。

我为测试目的创建了一个更简单的布局版本，我希望有人至少能够指出我正确的方向来解决这个问题。我添加了一些 lorem ipsum 并对列和 div 进行了颜色编码，希望能够更容易地查看需要更改哪些样式。这是确切的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title Here</title>
<style type="text/css">
    .wrapper
    {
        color: #333;
        line-height: 130%;
        margin: 10px 12px 0px 10px;
        -webkit-border-radius: 11px 11px 0 0;
        -moz-border-radius: 11px 11px 0 0;
        border-radius: 11px 11px 0 0;
    }
    .columnmask
    {
        position: relative;
        clear: both;
        float: left;
        width: 100%;
        overflow: hidden;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        border-top: 1px solid gray;
    }
    .threecol
    {
        background: white;
        -webkit-box-shadow: #000 2px 2px 3px;
        -moz-box-shadow: #000 2px 2px 3px;
        box-shadow: #000 2px 2px 3px;
        background: red;
    }
    .threecol .middlecolumn
    {
        float: left;
        width: 200%;
        margin-left: -170px;
        position: relative;
        right: 100%;
        background: blue;
    }
    .threecol .leftcolumn
    {
        float: left;
        width: 100%;
        margin-left: -50%;
        position: relative;
        left: 340px;
        background: yellow;
    }
    .threecol .midcolwrap
    {
        float: left;
        width: 50%;
        position: relative;
        right: 170px;
        padding-bottom: 1em;
    }
    .threecol .midcol
    {
        margin: 0 180px;
        position: relative;
        left: 200%;
        overflow: hidden;
        padding-top: 5px;
        background: green;
    }
    .threecol .leftcol
    {
        float: left;
        float: right;
        width: 160px;
        position: relative;
        right: 5px;
        text-align: center;
        background: silver;
    }
    .threecol .rightcol
    {
        float: left;
        float: right;
        width: 160px;
        margin-right: 15px;
        position: relative;
        left: 50%;
        text-align: center;
        background: purple;
    }
    .footer
    {
        -webkit-border-radius: 0 0 11px 11px;
        -moz-border-radius: 0 0 11px 11px;
        border-radius: 0 0 11px 11px;
        background: orange;
    }
    #footer
    {
        position: relative;
        clear: both;
        margin: 0px 10px 10px 10px;
        padding: .5em;
        text-align: center;
        border: 1px solid gray;
        -webkit-box-shadow: #000 2px 2px 3px;
        -moz-box-shadow: #000 2px 2px 3px;
        box-shadow: #000 2px 2px 3px;
    }
    .roundTop
    {
        -webkit-border-radius: 11px 11px 0 0;
        -moz-border-radius: 11px 11px 0 0;
        border-radius: 11px 11px 0 0;
    }
</style>
</head>
<body>
<div class="wrapper">
<div id="colmask" class="columnmask threecol roundTop">
    <div class="middlecolumn">
        <div class="leftcolumn">
            <div class="midcolwrap">
                <div class="midcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
            </div>
            <div class="leftcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
            <div class="rightcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
        </div>
    </div>
</div>
</div>
<div id="footer" class="footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
4

1 回答 1

0

你不能只给内列一个边界半径吗？或者，给他们一点上边距，让他们远离边缘？

于 2012-08-24T04:04:53.577 回答