4

次のように、4つの「連動」divで構成されるレイアウトがあります。

-------**********
-     -*        *
-     -*        *
-     -*        *
-------         *
++++++ *        *
+    + *        *
+    + **********
+    + ^^^^^^^^^^
+    + ^        ^
+    + ^        ^
+    + ^        ^
+    + ^        ^
++++++ ^^^^^^^^^^

最終的なレイアウトが次のようになるように、「上部」と「下部」のビットの周りに境界線を配置したいと思います。

-------**********
-               *
-               *
-               *
-------         *
++++++ *        *
+    + *        *
+    + **********
+    +^^^^^^^^^^^
+               ^
+               ^
+               ^
+               ^
++++++^^^^^^^^^^^

(以前は 2 つの div が交わっていた場所は、1 つの統合された形状のように見える滑らかな境界線である必要があります)

CSSでこれを適切に行うにはどうすればよいですか?

4

5 に答える 5

4

これが私の解決策です。負のマージンを持つ float を使用し、境界線を div の背景色に設定することで境界線のない部分を偽造します。

.w {width:223px;}
.box {float:left;height:100px;width:100px;border:1px solid #000;margin-bottom:10px;}
.tall {height: 300px;}
.wide {width:120px;}
.right {position:relative;z-index:1;float:right;margin-left:-1px;}
.no_rb {border-right:1px solid #fff;position:relative;z-index:10;}
.no_lb {border-left:1px solid #fff;position:relative;z-index:10;}

<div class="w">
    <div class="box wide no_rb"></div>
    <div class="box tall right"></div>
    <div class="box tall"></div>
    <div class="box right wide no_lb"></div>
</div>
于 2009-07-09T22:14:21.857 に答える
3

この 1 ピクセルの境界線と、絶対配置された div の 1 ピクセルのオーバーラップを行うことができます。特定の交差点の小さい方の div には境界線がなく、大きい方の div の境界線と重なるようにします。

編集:また、小さい div はより高い z-index を持つ必要があるため、上に置かれます。

于 2009-07-09T20:58:27.267 に答える
0

これを試してみてください。フロート、負のマージン、およびz-indexのみを使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Interlock test</title>
        <style>
            div { width:150px; border:1px solid #000; background:#fff; position:relative; margin-bottom:5px; float:left; }
            .container { width:309px; border:none; }
            .tallTop, .tallBottom { height:400px; z-index:1; }
            .tallTop { float:right; }
            .shortTop, .shortBottom { height:200px; z-index:2; width:157px; }
            .shortTop { margin-right:-1px; border-right:none; }
            .shortBottom { margin-left:-1px; border-left:none; float:right; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="shortTop"></div>
            <div class="tallTop"></div>
            <div class="tallBottom"></div>
            <div class="shortBottom"></div>
        </div>
    </body>
</html>
于 2009-07-10T05:35:13.633 に答える
-4

あなたが求めていることは、CSS だけを使用したクロスブラウザー互換の方法では不可能です。これには必ず JavaScript を使用する必要があります。

于 2009-07-09T20:57:34.867 に答える