CSS嵌入块删除空白

我需要一个容器，它被分成三个不同背景的区域。我有代码使用DIV来近似这个，但高度和宽度是不正确的。CSS嵌入块删除空白

<div class="container"> 
    <div class="wrap"> 
     <div class="square" id="square1">1</div> 
     <div class="square" id="square2">2</div> 
     <div class="square" id="square3">3</div> 
    </div> 
</div>

我在寻找什么是三“块”与不同的背景颜色，填补了“容器”的宽度（在这种情况下DIV），这看起来是这样的：

来源

2015-09-20 Ken J

有数倍的解决方案[这里]（http://davidwalsh.name/remove-whitespace-inline-block），[这里]（http://stackoverflow.com/ questions/5078239/how-to-remove-the-space-between-inline-block-elements）和[here]（https://css-tricks.com/fighting-the-space-between-inline-block-elements /）;） – lmgonzalves

将容器的宽度设置为240px，给定3 * 80px = 240px，然后获得上述结果（http://jsfiddle.net/1nqqtopo/4/） – urban

简单的答案内嵌块添加到您的容器，并删除宽度：

.container{ 
    border: 1px solid black; 
    display: inline-block; 
}

http://jsfiddle.net/1nqqtopo/3/

来源

2015-09-20 00:19:22

当你给display: inline-block;它会在它们之间生成空格。使用相同的代码是这样的：

<div class="container"> 
    <div class="wrap"> 
     <div class="square" id="square1">1</div><!-- 
    --><div class="square" id="square2">2</div><!-- 
    --><div class="square" id="square3">3</div> 
    </div> 
</div>

来源

2015-09-20 00:24:04

CSS嵌入块删除空白

回答

相关问题