Centered divs mit insgesamt Grenze

-1

Werfen Sie einen Blick auf diese Geige: https://jsfiddle.net/hkbynkmf/1/Centered divs mit insgesamt Grenze

Wie lasse ich die grüne Grenze alle divs umfließen, ohne div „überfüllt“ die Grenze? Das obere div ist in Ordnung, das untere div ist nicht OK. Auch brauche ich einen Abstand zwischen den divs;

Ich weiß, dass Padding und Rand transparent ist, also wählte ich (eine grüne) Grenze, um meinen Punkt zu veranschaulichen. Am Ende sollte die Freigabe transparent sein.

HTML:

body { 
 
    position: relative; 
 
    background-color: #ff0000; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    padding: 0px; 
 
    border: 10px solid #190; 
 
    margin: 0px; 
 
} 
 

 
#header { 
 
    position: relative; 
 
    margin:0 auto;     /* div will be  H-centered */ 
 
    top: 10px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    width: 960px; 
 
    height: 250px; 
 
    background-color: #DDDDDD; 
 
    overflow: hidden;    /* Keep all sub-elements inside this div */ 
 
} 
 

 
#intro { 
 
    position: relative; 
 
    margin:0 auto;     /* div will be H-centered */ 
 
    top: 15px; 
 
    left: 0; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    width: 960px; 
 
    height: 150px; 
 
    background-color: blue; 
 
    overflow: hidden;    /* Keep all sub-elements inside this div */ 
 
}

<body>      <!--position: relative;--> 
 
    <div id="header">   <!--position: relative;-->    
 
    </div> 
 
    <div id="intro">   <!--position: relative;-->    
 
    </div> 
 
</body>

Quelle

2017-07-29 user2286339

hinzufügen 'padding-bottom: 15px;' an das Körperelement – bhv

Sie verwenden das top Attribut Ihr Intro div 15px nach unten zu bewegen, unter dem Header. Dies verursacht die 15px Überlappung mit dem Container. Wenn Sie Objekte auf diese Weise positionieren, sollten Sie die Anwendung margin verwenden, statt die Positionierungsattribute , right, bottom oder left.

Sie haben viel mit Ihrem CSS zu tun, was das Stylesheet viel komplizierter macht, als es sein muss. Ich habe Ihre CSS vereinfacht wie folgt den gleichen Effekt zu erzielen:

body { 
    background-color: #ff0000; 
    border: 10px solid #190; 
    margin: 0px; 
    padding: 0px; 
} 

a img { 
    border:none; 
} 

#header { 
    background-color: #DDDDDD; 
    height: 250px; 
    margin:0 auto; 
    overflow: hidden; 
    width: 300px; 
} 

#intro { 
    background-color: blue; 
    height: 150px; 
    margin:15px auto 0; 
    overflow: hidden; 
    width: 300px; 
}

See updated fiddle

Quelle

2017-07-29 12:18:40 PTD

Danke - ich versuchte, die Überlappung der zweiten zu umgehen div durch Zuweisung der Position "relativ" zum Körper und den Divs; offensichtlich falsch. – user2286339

In Ihrem Code wird die #intro positioniert 15px unter den #header. Dadurch bleibt dem div im Körper kein Platz.

nicht sicher, was Sie versuchen, hier zu erreichen mit position: relative; aber die #intro kann wie

#intro 
{ 
    margin:10px auto;/* div will be H-centered */ 

    width: 300px; 
    height: 150px; 
    background-color: blue; 
    overflow: hidden;/* Keep all sub-elements inside this div */ 
}

Quelle

2017-07-29 12:12:47

Mit der Marge Top-Eigenschaft auf dem #intro div geschrieben wird die grüne Grenze erlauben, zu fließen, während auch mit der Raum zwischen den divs. Hier ist die Geige: https://jsfiddle.net/hkbynkmf/17/

#intro 
{ 
    position: relative; 
    margin:15px auto 0px auto        /* div will be H-centered */ 

    left: 0; 
    bottom: 0px; 
    right: 0px; 

    width: 300px; 
    height: 150px; 
    background-color: blue; 
    overflow: hidden;         /* Keep all sub-elements inside this div */ 
}

Quelle

2017-07-29 12:13:58

Centered divs mit insgesamt Grenze

Antwort

Verwandte Themen