HTML，CSS 3列布局顯示：內嵌塊間隙

我想知道是否有人能夠幫助我使用3列布局。當我使用這段代碼時，在換行div和頁腳之間總會有間隙。HTML，CSS 3列布局顯示：內嵌塊間隙

HTML

<div id="header">Header</div> 
<div id="wrap"> 
    <div id="left"></div> 
    <div id="content"></div> 
    <div id="right"></div> 
</div>  
<div id="clear"></div> 
<div id="footer"></div>¨

CSS

*{ 
     box-sizing: border-box; 
     margin:0px; 
     padding:0px; 

     } 

     #header { 
      background-color:aqua; 
      height:75px; 
     } 

     #wrap div{ 
      display:inline-block; 
     } 

     #left{ 
      float:left; 
      width:25%; 
      height:15px; 
      background-color:red; 
     } 
     #content{ 
      width:50%; 
      height:15px; 
      background-color:blue; 
     } 
     .clear{ 
      clear:both; 
     } 

     #right{ 
      float:right; 
      width:25%; 
      height:15px; 
      background-color:green; 
     } 
     #footer{ 
      height:50px; 
      background-color:yellow; 
     }

這裏有一個小提琴我一直在周圍工作 - https://jsfiddle.net/axee/czxwyzqL/3/

我真的很感謝所有的提示！

來源

2017-09-24 Kedge

你的小提琴有一些錯誤 - https://jsfiddle.net/eatjy7cr/你還需要浮動#content div。 –

我已經重寫了你的代碼，我使用類而不是IDS，並拿出一些不必要的部分。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
    margin: 0px; 
    } 
    .header { 
    background-color: aqua; 
    height: 75px; 
    } 
    .left { 
    float: left; 
    width: 25%; 
    height: 15px; 
    background-color: red; 
    } 
    .content { 
    float: left; 
    width: 50%; 
    height: 15px; 
    background-color: blue; 
    } 
    .right { 
    float: left; 
    width: 25%; 
    height: 15px; 
    background-color: green; 
    } 
    .footer { 
    height: 50px; 
    background-color: yellow; 
    } 
</style> 
</head> 
<body> 
    <div class="header">Header</div> 
    <div class="left"></div> 
    <div class="content"></div> 
    <div class="right"></div> 
    <div class="footer"></div> 
</body> 
</html>

我希望這有幫助！

來源

2017-09-24 20:58:32

它完美的作品。謝謝！我非常感謝你的幫助！ – Kedge

沒問題，很高興它正在使用 –

值得一提的是，刪除設置爲「inline-block」的#wrap div是來自空白的地方。它將包裝div之後的「return」字符「輸出」到屏幕上，因爲它是內聯的，並且會創建空白。 – u02sgb

HTML，CSS 3列布局顯示：內嵌塊間隙

回答

相關問題