خلق المتشابكة، الحدود غير النظامية مع CSS

StackOverflow https://stackoverflow.com/questions/1106352

  •  12-09-2019
  •  | 
  •  

سؤال

لدي تخطيط مكون من 4 "المتشابكة" Divs، مثل ذلك: 

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

أريد أن أضع الحدود حول البتات "الأعلى" و "أسفل"، أن يكون التصميم النهائي يشبه:

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

(حيث يجب أن تكون اثنين divs المستخدمة للقاء حدود ناعمة تبدو وكأنها شكل موحد واحد)

كيف يجب أن أفعل هذا بشكل صحيح في 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>

نصائح أخرى

يمكنك القيام بهذه الحدود 1PX و 1PX تداخل Divs المطلق. لديك أصغر من divs for a intersect معينة ليس لها حدود، وجعلها تتداخل على حدود الحم الأكبر.

يحرر: أيضا، يجب أن يكون للحوم الأصغر فهرس 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>

جرب هذا واحد خارج. باستخدام العوامات، الهوامش السلبية و 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>

ما تسأل عنه غير ممكن في أي طريقة متوافقة عبر المتصفح باستخدام CSS وحدها. كنت بحاجة إلى استخدام جافا سكريبت بالتأكيد لهذا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top