2

我即将建立一个网站，但我被困在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;
}
4

3 回答 3

3

在你的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;
}

演示

于 2013-07-22T08:13:17.727 回答
0

它现在工作正常..只需将其设置position:absolute为您的侧边栏样式..

这是css的更新代码：

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

演示

于 2013-07-22T08:14:10.993 回答
0

您需要将元素的宽度设置为 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%;

这将使所有框的宽度完全相同，并使它们都适合同一行。

于 2013-07-22T08:21:09.313 回答