Question

我即将建立一个网站，但我陷入了困境。出于某种原因，视频幻灯片和侧栏之间有一个空格。谁能告诉我为什么会这样？下面是给出代码时我的Web浏览器显示的图片。 An example of my code

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

Answer 1

更改 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

Answer 2

现在工作正常.. Jus将position:absolute设置为侧边栏样式..

以下是css的更新代码：

#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}

Demo

Answer 3

您需要将元素的宽度设置为33.3333％或类似的值，因为每个元素的33％会留下1％的差距。

你遇到的问题不适合那个宽度是因为你设置的1px边框。对于传统的盒子模型，边框不包含在33.33％宽度内，因此它意味着实际宽度为33.33％+ 1px。

要解决此问题，您可以使用边框框模型。我一直都在使用它 - 工作得更好。

请在此处阅读原因及其作用：

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

只需添加：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

到你的css文件。然后将三个元素的宽度更改为

width:33.33%;

这将使所有盒子的宽度完全相同，并使它们全部放在同一条线上。

Div内联块元素未正确填充宽度

3 个答案: