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內聯塊元素沒有正確填充寬度

回答

相關問題