gpt4 book ai didi

html - 无法让 2 个 div 并排坐在一起

转载 作者:搜寻专家 更新时间:2023-10-31 23:22:30 26 4
gpt4 key购买 nike

我不能让这 2 个 div 并排放置,它们之间有一些空白,如果我在宽度上再增加一个 px,右边的会低于左边的。我想也许我将 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>

最佳答案

你应该使用 percentage unitsvw 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>

关于html - 无法让 2 个 div 并排坐在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38281689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com