, CSS

내가 레이아웃은 div의 "연동"4 이루어져있다으로, 불규칙한 경계를 연동과 같이 만들기에,, CSS

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

내가 '상단'및 '하단'비트 주위에 테두리를 넣을 같은 최종 레이아웃 봐 :

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

(충족하는 데 사용되는 두 개의 div를 하나 개의 통일 된 모양처럼 보이는 부드러운 경계를해야합니다 경우)

어떻게 CSS에서 제대로이 작업을 수행해야합니까?

출처

2009-07-09 cksubs

Here's my solution. 그것은 부정적인 여백 수레를 사용하고 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-09 22:14:21 Emily

-4

CSS 만 사용하는 브라우저 간 호환 방식으로는 불가능합니다. 이를 위해 반드시 JavaScript를 사용해야합니다.

출처

2009-07-09 20:57:34

-1은 3 가지 대답 (올바른 방향으로 진행되는 것처럼 보임)에서 설명한 것처럼 여러 가지 방법을 제공합니다. 절대로 말하지 마십시오 ... –

절대 위치 지정 div의 1px 테두리와 1px 겹침을 사용할 수 있습니다. 주어진 교차점에 대한 div 중 더 작은 것이 테두리가없고 더 큰 div의 경계와 겹치게 만듭니다.

편집 : 또한 작은 div는 더 높은 z- 색인을 가져야 정상 위에 있습니다.

출처

2009-07-09 20:58:27

아마 완벽 할 수는 없지만 작동해야합니다. – user103219

테두리, 패딩 및 상대 위치 지정으로 약간의 문제가 있습니다. 이 예를 참조하십시오

<!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>

출처

2009-07-09 21:21:14 Blixt

이 항목을 선택하십시오. 수레, 음수 여백 및 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>

출처

2009-07-10 05:35:13

답변

관련 문제