我即将创建一个网站，但我被 CSS 困住了。由于某种原因，视频幻灯片和侧边栏之间有一个空格。谁能告诉我这是为什么？
下面是我的网络浏览器在给出代码时显示的图片。
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='header'>
<p>Header</p>
</div>
<div id='picture_gallery'>
<p>Picture Gallery</p>
</div>
<div id='nav_bar'>
<p>Nav Bar</p>
</div>
<div id='vision_statement'>
<p>Vision Statement</p>
</div>
<div id='video_slideshow'>
<p>Video Slideshow</p>
</div>
<div id='sidebar'>
<p>Side Bar</p>
</div>
<div id='footer'>
<p>Footer</p>
</div>
</body>
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left;
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 33%;
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
最佳答案
更改 css 中的一些定义 box-sizing:border-box;
像这样
#sidebar, #vision_statement, #video_slideshow{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#header {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#picture_gallery {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#nav_bar {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
}
#vision_statement {
border: 1px solid black;
display: inline-block;
float: left; // add this float:left
height: 50px;
width: 33%;
text-align: center;
}
#video_slideshow {
border: 1px solid black;
display: inline-block;
height: 50px;float: left; // add float:left
width: 33%;
text-align: center;
}
#sidebar {
border: 1px solid black;
display: inline-block;
float: right;
height: 50px;
width: 34%; // add width :34%
text-align: center;
}
#footer {
border: 1px solid black;
height: 50px;
width: auto;
text-align: center;
clear:both; // add this clear both;
}
<强> Demo
关于html - Div 内联 block 元素未正确填充宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17782560/