質問
私はそうのように、divを「連動」4で構成されたレイアウトを持っています
-------**********
- -* *
- -* *
- -* *
------- *
++++++ * *
+ + * *
+ + **********
+ + ^^^^^^^^^^
+ + ^ ^
+ + ^ ^
+ + ^ ^
+ + ^ ^
++++++ ^^^^^^^^^^
私は最終的なレイアウトがどのように見える持っている、「トップ」と「下」のビットの周りの境界線を入れたいです
-------**********
- *
- *
- *
------- *
++++++ * *
+ + * *
+ + **********
+ +^^^^^^^^^^^
+ ^
+ ^
+ ^
+ ^
++++++^^^^^^^^^^^
(満たすために使用される二つのdivは、1つの統合形状のように見える滑らかな境界であるべきである)
どのように私はCSSでこれを適切に行う必要がありますか?
解決
ここに私の解決策だ。それは、負のマージンで山車を使用し、無国境を偽装を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>
他のヒント
あなたは絶対位置のdivのこの1pxの境界線と1pxの重複を行うことができます。与えられたためのdivの小さい方には国境がない、それは大きなdiv要素の境界線をオーバーラップさせると交差しています。
の編集:それは上にかかっているので、のも、小さいdiv要素は、より高いZインデックスを持つ必要があります。
これは、ボーダー、パディングとの相対位置でビットを再生するだけです。この例を参照してください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DIVs</title>
<style type="text/css">
body, html {
background: #eee;
}
div.box {
background: #fff;
border-style: solid;
border-width: 2px;
position: relative;
width: 100px;
z-index: 1;
}
div.group {
float: left;
}
#box-1, #box-4 {
z-index: 2;
}
#box-1 {
border-color: #f00;
border-bottom: 0;
border-right: 0;
padding-right: 2px;
}
#box-2 {
border-color: #f0f;
}
#box-3 {
border-color: #0f0;
}
#box-4 {
border-color: #00f;
border-left: 0;
border-top: 0;
padding-left: 2px;
}
#group-2 {
left: -2px;
position: relative;
}
</style>
</head>
<body>
<div class="group" id="group-1">
<div class="box" id="box-1">one<br />one<br />one<br />one</div>
<div class="box" id="box-2">two<br />two<br />two<br />two<br />two<br />
two</div>
</div>
<div class="group" id="group-2">
<div class="box" id="box-3">three<br />three<br />three<br />three<br />
three<br />three</div>
<div class="box" id="box-4">four<br />four<br />four</div>
</div>
</body>
</html>
この1を試してみてください。フロート、負のマージンとzインデックスを使用してのみ。
<!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>
何を求めていることだけではCSSを使用して、任意のクロスブラウザ互換性のある方法では不可能です。あなたは間違いなく、このためにJavaScriptを使用する必要があると思います。
所属していません StackOverflow