2つのdivを並べて並べることはできません

私はこの2つのdivを並べて並べて、それらの間に空白があります。また、右側にもう1つpx幅を追加すると、左のもの。私は多分私はあなたのコンテナがenought広くないです...私はわからない、私はこれは単純なものである知っているが、私は私が間違って何をしたか知らないのdivが間違っ2つのdivを並べて並べることはできません

*{margin:0px; 
 
padding:0px;} 
 

 
body{background-color:white;} 
 

 
h3{float:left; 
 
color:white; 
 
padding-left:160px; 
 
padding-top:11px; 
 
font-family:cursive;} 
 

 
ul{list-style-type:none; 
 
margin:0px; 
 
padding:0px; 
 
background-color:#00b7b7; 
 
overflow:hidden; 
 
width:276px; 
 
float:right; 
 
height:47px;} 
 

 
li a{display:block; 
 
width:60px; 
 
text-decoration:none; 
 
text-align:center; 
 
padding:14px 16px; 
 
height:47;} 
 

 
li{display:inline; 
 
float:right;} 
 

 
li a:hover{background-color:#0c6d6d;} 
 
li a:link{color:White;} 
 
li a:visited{color:white;} 
 

 
.header{background-color:#0193C4; 
 
width:100%; 
 
height:47px; 
 
overflow:hidden;} 
 

 

 
.left{width:1072px; 
 
height:350px; 
 
background-color:#0193C4; 
 
float:left; 
 
padding:0px; 
 
margin:0px;} 
 

 
.right{width:277px; 
 
height:270px; 
 
background-color:#00b7b7; 
 
float:right; 
 
padding:0px; 
 
margin:0px;} 
 

 

 
ul:first-child{border-left-style: solid; 
 
border-color:black;} 
 

 
.container{margin-top:10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>project1</title> 
 
<link type="text/css" rel="stylesheet" href="project1.css" /> 
 

 
</head> 
 

 
<body> 
 

 
<div class="header"> 
 
<h3>WebSite</h3> 
 

 
<div class="navbar"> 
 
     <ul> 
 
        <li> <a href="#">  Menu </a></li>  
 
\t \t \t \t <li> <a href="#">  Contact </a></li> 
 
\t \t \t \t <li> \t <a href="#">  Help </a></li>  
 
      </ul> 
 
</div> 
 
</div> 
 

 
<div class="container"> 
 
<div class="left"> 
 
<p></p> 
 
</div> 
 

 
<div class="right"> 
 
<p></p> 
 

 
</div> 
 

 
</div> 
 

 

 
</body> 
 
</html>

出典

2016-07-09 OneBeginner

はあなたがすべてで何を試してみましたか..？ – Lee

@Lee私は知っているすべてを試しました... – OneBeginner

。容器に多少の余裕があります。無効にします。 –

あなたはボックスのpercentage unitsまたはvw unitsを使用し、それらの両方のためのfloat:left必要があります。

*{margin:0px; 
 
padding:0px;} 
 

 
body{background-color:white;} 
 

 
h3{float:left; 
 
color:white; 
 
padding-left:160px; 
 
padding-top:11px; 
 
font-family:cursive;} 
 

 
ul{list-style-type:none; 
 
margin:0px; 
 
padding:0px; 
 
background-color:#00b7b7; 
 
overflow:hidden; 
 
width:276px; 
 
float:right; 
 
height:47px;} 
 

 
li a{display:block; 
 
width:60px; 
 
text-decoration:none; 
 
text-align:center; 
 
padding:14px 16px; 
 
height:47;} 
 

 
li{display:inline; 
 
float:right;} 
 

 
li a:hover{background-color:#0c6d6d;} 
 
li a:link{color:White;} 
 
li a:visited{color:white;} 
 

 
.header{background-color:#0193C4; 
 
width:100%; 
 
height:47px; 
 
overflow:hidden;} 
 

 

 
.left{width:70%; 
 
height:350px; 
 
background-color:#0193C4; 
 
float:left; 
 
padding:0px; 
 
margin:0px;} 
 

 
.right{width:30%; 
 
height:270px; 
 
background-color:#00b7b7; 
 
float:left; 
 
padding:0px; 
 
margin:0px;} 
 

 

 
ul:first-child{border-left-style: solid; 
 
border-color:black;} 
 

 
.container{margin-top:10px; 
 
}

<div class="header"> 
 
<h3>WebSite</h3> 
 

 
<div class="navbar"> 
 
     <ul> 
 
        <li> <a href="#">  Menu </a></li>  
 
\t \t \t \t <li> <a href="#">  Contact </a></li> 
 
\t \t \t \t <li> \t <a href="#">  Help </a></li>  
 
      </ul> 
 
</div> 
 
</div> 
 

 
<div class="container"> 
 
<div class="left"> 
 
<p></p> 
 
</div> 
 

 
<div class="right"> 
 
<p></p> 
 

 
</div> 
 

 
</div>

出典

2016-07-09 12:26:51

この作品はありがとうございます、なぜdosentがpxで動作するのですか？ – OneBeginner

これはレスポンシブなレイアウトに適しています。しかし、一般的には、コンテナの幅を適切に取る必要があります。 –

この場合、Windowsの画面サイズのためにピクセルを使用することは安全ではありません。レスポンシブなレイアウトを作成するにはパーセンテージ単位を使用する必要があります。最近、vw（ビューポート幅）単位も非常に便利です。これらの単位を使用すると、レイアウトは小さな画面サイズの分割に非常に適しています。 @OneBeginer –

を入れ子になったと思います子供たちに合うように！

.container { 
    margin-top: 10px; 
    width: 2000px; /* do your calc here */ 
}

出典

2016-07-09 12:23:28

これもうまくいきます、ありがとうございます – OneBeginner

2つのdivを並べて並べることはできません

答えて

関連する問題