Ausrichtung verschiedener Divs

Question

Ich versuche this layout zu entwerfen - beziehen Sie sich auf das 2. Bild für das Gesamtlayout.

A ist 20px hoch und muss die gesamte Breite des Bildschirms einnehmen.

B ist 100px hoch und muss auch die gesamte Breite des Bildschirms einnehmen.

C ist 200px breit und muss die gesamte Höhe des Bildschirms einnehmen, ausgenommen die 120px über ihm wegen A + B.

D hat keine Einschränkungen und passt sich der Fenstergrößenanpassung an.

Um auf das Problem näher zu kommen, auf das ich zurzeit schaue, sieh das 1. Bild an.

• Wie stelle ich sicher, dass das Zentrum von B3 immer mit der Mitte des Textes in Div A ausgerichtet ist? B1-B4 sind 4 verschiedene Elemente, die ich im B div. Habe. B1, B2 und B4 sollten am selben Ort bleiben. Der einzige "flüssige" Teil ist die Änderung der rechten/linken Ränder für B3, so dass er mittig ausgerichtet bleibt.

Mein aktueller Code kann bei this JSFiddle gefunden werden.

index.html:

<div id="A">A</div> 
<header> 
    <!-- Header is B in the diagram --> 
    <div id="B1">B1</div> 
    <div id="B2">B2</div> 
    <div id="B3">B3</div> 
    <div id="B4">B4</div> 
</header> 
<div id="C">C</div> 
<div id="D">D</div> 

style.css:

html, body { 
    width: 100%; 
    height: 100%; 
} 

#A{ 
    width:   100vw; 
    height:  20px; 
    background: black; 
    color: white; 
    text-align: center; 
} 

header { 
    height: 100px; 
    width: 100%; 
    background: #494949; 
    color: white; 
} 

#B1 { 
    width: 100px; 
    height: 100px; 
    margin-left: 5px; 
    margin-right: 47px; 
    float: left; 
} 

#B2 { 
    float: left; 
    margin-right: 60px; 
} 

#B3 { 
    float: left; 
    height: 75px; 
    width: 580px; 
    margin-top: 12.5px; 
    text-align: center; 
} 

#B4 { 
    float: right; 
} 

#C { 
    height: 100%; 
    width: 200px; 
    float: left; 
    position: fixed; 
} 

#D { 
    background-color: #000000; 
    float: left; 
    margin-left: 200px; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    color: white; 
} 

Ich habe ein Video von dem, was ich in den Kommentaren bedeuten. Außerdem möchte ich darauf hinweisen, dass ich die divs nicht wirklich nach Alphabet benenne, nur für dieses Beispiel.

Danke für jede Hilfe.

Answer 1

Wenn Sie möchten, dass B3 auf die Mitte von A ausgerichtet wird, können Sie float: left nicht auf B1 und B2 verwenden, da es die Mitte von B3 auf der rechten Seite verschiebt. Die einzige Art, wie ich jetzt gefunden ist absolue Positionierung auf B1, B2 und B4 zu verwenden:

header { 
    height: 100px; 
    background: #494949; 
    color: white; 
    position: relative; 
} 

#B1, #B2, #B4 { 
    width: 100px; 
    height: 100px; 
} 

#B1 { 
    position: absolute; 
    top: 0px; 
    left: 5px; 
} 

#B2 { 
    position: absolute; 
    top: 0px; 
    left: 150px; 
} 

#B3 { 
    text-align: center; 
} 

#B4 { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

See demo here (mit zusaetzliche Farbe sichtbar zu machen).

Aber sei vorsichtig, iy dein Text auf B3 ist zu groß, es wird unter B1, B2 oder B4 gehen. Um dies zu vermeiden, können Sie Padding links und rechts von B3 hinzufügen. Aber es muss auf beiden Seiten derselbe Wert sein, oder das Zentrum von B3 wird nicht mehr zum Zentrum von A ausgerichtet sein.

Ich halte für eine Lösung ohne absolute Positionierung der Suche (beacause Ich mag es nicht) ...