divにコンテナを並べて保存するにはどうすればよいですか？

画像に与えられた色の2つの要素を持つコンテナを作成したいと思います。 2つは異なる部門であり、並んでいる必要があります。どうすればいいのですか？ここでdivにコンテナを並べて保存するにはどうすればよいですか？

は私のコードです：

<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>

出典

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; 
}

出典

2017-06-05 19:55:03 CodeNinji

あなたはとてもdivの上のパーセンテージを設定し、文書のボディに高さを設定しなかっただろうではありませんあなたがするまでは何もしないでください。また、sidenav divをフロートさせる必要がありました。

.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>

出典

2017-06-05 19:40:03 j08691

ありがとう！：D @ j08691 –

あなたのコードを更新しました！

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>

出典

2017-06-05 19:45:15 syedz

あなたはposition: absolute;に.sidenavと.bgrndを設定し、そこからそれに応じて配置することができます。また、.containerをwidth: 50%;とheight: 50%;に設定しましたが、これは望ましくないと思われます。

.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>

出典

2017-06-05 19:46:00

どのようにCSSフレックス使用について。

#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>

出典

2017-06-05 19:49:18

divにコンテナを並べて保存するにはどうすればよいですか？

答えて

関連する問題