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/

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

你的小提琴有一些错误 - 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>

我希望这有帮助！

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

没问题，很高兴它正在使用 –

值得一提的是，删除设置为“inline-block”的#wrap div是来自空白的地方。它将包装div之后的“return”字符“输出”到屏幕上，因为它是内联的，并且会创建空白。 – u02sgb

HTML，CSS 3列布局显示：内嵌块间隙

相关推荐