Wie behalte ich die divs nebeneinander im Container?

Ich möchte einen Container erstellen, der zwei Elemente mit den im Bild angegebenen Farben enthält. Die beiden sind verschiedene Divs und müssen nebeneinander bleiben. Wie mache ich es?Wie behalte ich die divs nebeneinander im Container?

Hier ist mein Code:

<html> 
 
\t <head> 
 
\t \t <title>Testing</title> 
 
\t \t <style> 
 
\t \t .container{ 
 
\t \t \t width: 50%; 
 
\t \t \t height: 50%; 
 
\t \t } 
 
\t \t .sidenav{ 
 
\t \t \t width: 25%; 
 
\t \t \t height: 100%; 
 
\t \t \t background-color: black; 
 
\t \t } 
 
\t \t .bgrnd{ 
 
\t \t \t width: 75%; 
 
\t \t \t height: 100%; 
 
\t \t \t background-color: blue; 
 
\t \t \t float: left; 
 
\t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="sidenav"> 
 
\t \t \t </div> 
 
\t \t \t <div class="bgrnd"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

Quelle

2017-06-05 Arun Kumar

How about this: 

<div class="container"> 
    <div class="sidenav"> 
     test 
    </div> 
    <div class="bgrnd"> 
     test 
    </div> 
</div> 

CSS: 

.container { 
    width: 50%; 
    height: 50%; 
} 
.sidenav { 
    width: 25%; 
    height: 100%; 
    background-color: black; 
    color: #fff; 
    float: left; 
} 
.bgrnd { 
    width: 75%; 
    height: 100%; 
    background-color: blue; 
    color: #fff; 
    float: right; 
}

Quelle

2017-06-05 19:55:03 CodeNinji

Sie nicht eine Höhe auf den Körper des Dokuments so Einstellung einen Prozentsatz der Divs nicht festgelegt haben tue alles bis du es tust. Sie mussten auch das Sidennav-Div aufschwimmen.

.container { 
 
    width: 50%; 
 
    height: 50%; 
 
} 
 

 
.sidenav { 
 
    width: 25%; 
 
    height: 100%; 
 
    background-color: black; 
 
    float: left 
 
} 
 

 
.bgrnd { 
 
    width: 75%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="sidenav"> 
 
    </div> 
 
    <div class="bgrnd"> 
 
    </div> 
 
</div>

Quelle

2017-06-05 19:40:03 j08691

Dank! : D @ j08691 –

Ihr Code aktualisiert!

body, html{ 
 
     padding:0px; 
 
     margin:0px; 
 
     height:100%; 
 
    } 
 

 
    .container{ 
 
     width: 50%; 
 
\t height: 50%; 
 
    } 
 
\t \t 
 
    .sidenav{ 
 
\t width: 25%; 
 
\t height: 100%; 
 
\t background-color: black; 
 
\t float: left; 
 
    } 
 
     
 
\t .bgrnd{ 
 
\t width: 75%; 
 
\t height: 100%; 
 
\t background-color: blue; 
 
     float: left; 
 
\t }

<div class="container"> 
 
    <div class="sidenav"></div> 
 
    <div class="bgrnd"></div> 
 
</div>

Quelle

2017-06-05 19:45:15 syedz

Sie können .sidenav und .bgrnd auf position: absolute; gesetzt und entsprechend von dort zu positionieren. Außerdem haben Sie .container festgelegt auf: width: 50%; und height: 50%; die ich vermute, dass Sie nicht wollen.

.container { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.sidenav { 
 
    width: 25%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: black; 
 
} 
 
.bgrnd { 
 
    width: 75%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 25%; 
 
    background-color: blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Testing</title> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="sidenav"></div> 
 
    <div class="bgrnd"></div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-06-05 19:46:00

Wie über CSS-flex mit.

#main { 
width: 100%; 
border: 1px solid #c3c3c3; 
display: -webkit-flex; /* Safari */ 
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */ 
display: flex; 
flex-direction: row-reverse; 
} 
.div1 { 
width: 25%; 
height: 50px; 
} 
.div2 { 
width: 75%; 
height: 50px; 
} 
<div id="main"> 
    <div class="div1" style="background-color:coral;">A</div> 
    <div class="div2" style="background-color:lightblue;">B</div> 
</div>

Quelle

2017-06-05 19:49:18

Wie behalte ich die divs nebeneinander im Container?

Antwort

Verwandte Themen