Question

我不能让这2个div并排坐着，它们之间有一些空白区域，如果我在宽度上再添加一个px，右边的那个会低于左边的那个。我想也许我嵌套了错误的div我不确定，我知道这很简单，但我不知道我做错了什么......

＆＃13;

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

＆＃13;

<!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>      
				  <li>    <a href="#">       Contact </a></li> 
				  <li>	 <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>

＆＃13;

Answer 1

您应该使用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>      
				  <li>    <a href="#">       Contact </a></li> 
				  <li>	 <a href="#">        Help  </a></li>       
          </ul>
</div>
</div>

<div class="container">
<div class="left">
<p></p>
</div>

<div class="right">
<p></p>

</div>

</div>

Answer 2

您的容器不适合儿童使用！

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

不能让2个div并排坐着

2 个答案: