无法使两个div并排显示

Question

无法使两个div并排显示

3

我无法让这两个div并排坐着，它们之间有一些空白，如果我在宽度上再加1像素，右边的那个就会移到左边的下面。我想可能是我嵌套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>      
      <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>

- OneBeginner

@Lee 我已经尝试了我所知道的一切... - OneBeginner

.container有一些margin。禁用它。 - user3470625

@SkyWookie 那不会影响子 div。 - Lee

@OneBeginer，在类.right上移除float:right，添加float:left。 - Teuta Koraqi

@Lee 如果我将两个元素都浮动到左侧，那么情况是一样的，右侧仍然有一些空白，而如果我在宽度上添加像素(px)，它会移到下面... - OneBeginner

显示剩余2条评论

2个回答

1

您的容器宽度不足以容纳子元素！

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

- Sergey Khmelevskoy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teuta Koraqi · Accepted Answer

您应该使用百分比单位或vw单位来定义您的盒子，同时对它们使用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>