61,117
社区成员
发帖
与我相关
我的任务
分享刚学web小白想请教下各位大佬关于web定位样式的
按理说介个运行出来应该是之间有白色边界的(图片圈出来的地方)但是为什么它没有呢，是哪里写错了还是写少了啥
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动定位</title>
<style>
*{
/*默认样式清零*/
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;/*居中*/
width: 1000px;
height: 500px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;/*与下面main部分之间有个空白分割*/
}
#main{
height: 500px;
background-color: #cff;
margin-bottom:5px;
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;/*left也行但是中间的空隙没了，也可aside的margin-right:5px就有空隙*/
width: 695px;
height: 500px;
background-color: #cff;
}
#foot{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动定位</title>
<style>
*{
/*默认样式清零*/
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;/*居中*/
width: 1000px;
height: 500px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;/*与下面main部分之间有个空白分割*/
}
#main{
height: 500px;
background-color: #cff;
margin-bottom:5px;
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;/*left也行但是中间的空隙没了，也可aside的margin-right:5px就有空隙*/
width: 695px;
height: 500px;
background-color: #cff;
}
#foot{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Teal-in 2020-09-04
- 打赏
- 举报
#main 背景色去掉
然后在
#content {
float: right;
box-sizing: border-box;
padding-left: 20px;
width: 695px;
height: 500px;
background-color: #cff;
}
猫猫猫猫猫？ 2020-08-15
- 打赏
- 举报
#main {
height: 500px;
background-color: #cff;
margin-bottom: 5px;
}
你这里给 #main 赋了背景色，你圈的地方是有空隙的，只是颜色看不出来而已
你可以学习一下怎么用 f12 来检查html元素，这个方法很容易发现问题的
