Wie positioniere ich div's mit CSS?

Question

Wenn ich versuche, einen Abstand zwischen ihnen zu halten, möchte ich einige divs in einer bestimmten Form für meine Website positionieren und ihnen dann Inhalte hinzufügen. Ich habe die Seiten responsiv gestylt, also würde ich gerne wissen, ob diese auf diese Weise mit Reaktionsfähigkeit divisibel ist. Das Ergebnis, das ich denke, es könnte so etwas wie dieses:

Being X und Y die beiden divs ich bereits erstellt haben (für den Header und das Menü) und Z die Fußzeile. Die divs Ich mag würde in diesen Positionen setzen sind diejenigen DIV 1, DIV 2 und DIV 3.

Für den Moment sind die beiden Hauptteile oben (Header und Menü) wie folgt gestylt werden:

* { 
    margin:0; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

header { 
    width:90%; 
    height:30%; 
    margin: 0 auto; 
    background-color:darkblue; 
    color:white; 
    z-index: 105; 
    position:relative; 
} 

nav { 
    width:90%; 
    height:22%; 
    margin: 0 auto; 
    background-color:skyblue; 
} 

und die HTML ich im Moment dies ist für die DIV 1, DIV 2 und DIV 3 habe:

<div id="content"> 
    <div id="leftinfo"> 
     <ul> 
      <li>INFO</li> 
      <li>ABOUT</li> 
     </ul> 
    </div> 


    <div id="hcontent"> 
     <div class="tophcontent"> 

     </div> 
    </div> 


    <div id="hcontent2"> 
     <p></p> 
    </div> 
</div> 

ich habe zu kämpfen, wie es zu positionieren, wie diese, den Web-Flow mit den anderen divs Aufrechterhaltung . Jede Hilfe oder Tipps dazu wäre sehr willkommen.

Answer 1

Hier ist eine Probe display: flex verwenden. Es hat heute ca. 94% Browser-Unterstützung, was meiner Meinung nach sehr gut ist.

Ein großer Vorteil mit diesem, es ist voll dynamisch in Bezug auf den Inhalt in jedem der Elemente im Vergleich zu float und inline-block Versionen.

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.info, .about, .content-left, .content-right-top, 
 
.content-right-bottom, .footer { 
 
    border: 1px solid; 
 
} 
 
.wrapper { 
 
    flex: 1; 
 
    display: flex; 
 
    min-height: 100%; 
 
} 
 
.content-left, .wrapper-inner { 
 
    flex: 1; 
 
} 
 
.wrapper-inner { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
} 
 
.content-right-top, .content-right-bottom { 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div class="info"> 
 
    Info<br> 
 
    2 lines 
 
    </div> 
 

 
    <div class="about"> 
 
    About<br> 
 
    in<br> 
 
    3 lines 
 
    </div> 
 

 
    <div class="wrapper"> 
 
    <div class="content-left"> 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
     Left take all the rest of the space 
 
    </div> 
 
    <div class="wrapper-inner"> 
 
     <div class="content-right-top"> 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     Right - Top 
 
     </div> 
 
     <div class="content-right-bottom"> 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     Right - Bottom 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="footer"> 
 
    Footer<br> 
 
    has 2 lines 
 
    </div> 
 
</div>

Answer 2

Ich denke, dass Sie so etwas wie

https://jsfiddle.net/2dxzr1mv/3/

*{ 
    box-sizing:border-box; 
    white-space: nowrap; 
} 
div{ 
    padding:0; 
    margin:0; 
} 
.div1{ 
    width:20%; 
    height:100%; 
    background-color:red; 
    min-height:100vh; 
    display:inline-block; 
} 
.wrapper{ 
    width:80%; 
    min-height:100vh; 
    display:inline-block; 
} 
.div2,.div3{ 
    width:100%; 
    min-height:50vh; 
    background-color:yellow; 
    word-wrap: break-word; 
    overflow:hidden; 
    white-space: normal; 
} 
.div3{ 
    background-color:blue; 
} 

Answer 3

Ich habe versucht, so etwas wie Ihr Bild wollen.

CSS

* { 
    margin:0; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
body { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
#content { 
    table-layout: fixed; 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#content > div { 
    display: table-cell; 
} 
.tophcontent { 
    height: 40px; 
    margin: 0 10px; 
    border: 2px solid orange; 
} 
.midhcontent { 
    margin: 10px; 
    margin-bottom: 0; 
    height: calc(100% - 46px); 
    border: 2px solid green; 
} 
#leftinfo { 
    border: 3px solid gray; 
    width:120px; 
} 

HTML

<div id="content"> 
    <div id="leftinfo"> 
     <ul> 
      <li>INFO</li> 
      <li>ABOUT</li> 
     </ul> 
    </div> 


    <div id="header"> 
     <div class="tophcontent"> 
     </div> 
     <div class="midhcontent"> 
     </div> 
    </div> 
</div> 

Hier ist meine JSfiddle

Answer 4

Ist es so etwas wie dieses Sie?

Codepen example

body, html{ 
    height:100%; 
} 

#wrapper{ 
    position:relative; 
    width: 90%; 
    height:100%; 
    margin:0 auto; 
} 

.left{ 
    float:left; 
    width:30%; 
    height:100%; 
    background:green; 
} 

.top-right{ 
    position:absolute; 
    right:0; 
    left:31%; 
    height:30%; 
    float:left; 
    background:blue; 
} 

.bottom-right{ 
    position:absolute; 
    right:0; 
    left:31%; 
    bottom:0; 
    top:32%; 
    float:left; 
    background:red; 
}