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

我即将创建一个网站，但我陷入了CSS。出于某种原因，视频幻灯片和侧栏之间存在空隙。谁能告诉我为什么这是？下面是我的网页浏览器在给出代码时显示的图片。 An example of my code Div内联块元素没有正确填充宽度

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

来源

2013-07-22 user2449973

关于内联块之间的空间，关于SO的讨论很多。另见http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – fcalderan

这是因为'width：33％' – Cherniv

@Cherniv有没有其他方法可以显示3格内嵌 - 平均阻止元素？ – user2449973

改变一些你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

来源

2013-07-22 08:13:17

这样做了，谢谢。 – user2449973

它现在的工作很好..物权法设置position:absolute到侧边栏的风格..

这里是CSS更新的代码：

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

Demo

来源

2013-07-22 08:14:10

您需要设置元素的宽度为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-22 08:21:09 robooneus

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

回答

相关问题