Question

我正在关注来自here的圣杯3柱液体布局，我正在尝试使用新的css技术绕过角落，但我不能让左上角表现得正常。角落在外面是圆形的，但是里面还有另一个不是圆形的div，它突出了圆角。我相信这可能是因为所有的保证金转换以及未发生的事情，但我在完成这种布局方面并没有取得多大成功。

我应该提一下，只有在这一点上，角落才能在firefox中正常工作，我显然需要它们在所有现代浏览器中工作（IE可能是一个例外 - 我更喜欢chrome ，歌剧和野生动物园支持）。

为了测试目的，我创建了一个更简单的布局版本，我希望有人能够至少指出我正确的方向来解决这个问题。我添加了一些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>

Answer 1

你能不能只给内柱一个边界半径？或者，给它们一点点上边距将它们推离边缘？

带有圆角的圣杯3列在某些浏览器中不起作用

1 个答案: