0

ここから聖杯の 3 列の液体レイアウトに従っています。新しい CSS テクニックを使用して角を丸くしようとしていますが、左上隅が正しく動作しません。角は外側が丸くなっていますが、内側に丸くない別の div があり、丸角が突き出ています。余白の切り替えなどが原因である可能性があると思いますが、このレイアウトを完成させるのにあまり成功していません。

コーナーが正しく機能するのはこの時点でのみ Firefox であり、すべての最新のブラウザーで機能する必要があることは明らかです (IE は例外かもしれません - 私はクロム、オペラ、サファリのサポートをもっと探しています)。

テスト目的でレイアウトのより単純なバージョンを作成しました。これを理解するために、誰かが少なくとも私を正しい方向に向けることができることを願っています. 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 に答える