不能消除包含div内的2个水平div之间的空间 [英] cannot eliminate space between 2 horizontal divs inside containing div

问题描述

应该很容易，对吧？只要设置外部包含div的填充为零，并设置外部div里面的两个并排的div有margin：0，但是这没有影响2个水平div之间的空间。我需要的是红色轮廓的左div触摸绿色轮廓的右侧div。

尽管我努力使用填充和边距，两个div之间的空间不会消失。

我看过很多关于SO的答案，但到目前为止没有人打破这个简单的例子 - 我的小提琴显示这个问题，在

http://jsfiddle.net/Shomer/tLZrm/7/ p>

这里是非常简单的代码：

 < div style = border：4px solid blue; white-space：nowrap; margin：0; padding：0; width：80％> 
 
< div style =display：inline-block; width：45％; overflow：hidden; margin：0; border：1px solid red> Flimmy-flammy 
< / div> 
 
< div style =display：inline-block; width：50％; overflow：hidden; margin：0px; border：1px solid green> Hambone-Sammy 
< / div> 
 
< / div> 
  

解决方案

尝试：

 < div style =border：4px solid blue; margin：0; padding：0; width：80％; height：50px;> 
 
< div style =float：left; display：inline-block; width：45％; overflow：hidden; border：1px solid red;> Flimmy-flammy 
< / div> 
 
< div style =float：left; display：inline-block; width：50％; overflow：hidden; border：1px solid green;> Hambone-Sammy 
< / div> 
 
< / div> 
  

Should be easy, right? Just set the outer containing div's padding to zero, and set the two side-by-side divs inside the outer div to have margin:0 but that's having no effect on the space between the 2 horizontal divs. What I need is the red-outlined left div to touch the green-outlined right-side div.

Despite my effort using padding and margin, the space between the 2 divs will not go away.

I have looked at many answers on SO but so far no one's broken it down to this simple example -- my fiddle shows this issue, at

http://jsfiddle.net/Shomer/tLZrm/7/

And here is the very simple code:

<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%">

   <div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy
    </div>

    <div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy
    </div>

</div>

解决方案

Try this:

<div style="border: 4px solid blue; margin:0; padding:0; width:80%; height: 50px;">

   <div style="float:left; display:inline-block; width:45%; overflow:hidden; border: 1px solid red;"> Flimmy-flammy
    </div>

    <div style="float: left; display:inline-block; width:50%; overflow:hidden; border: 1px solid green;"> Hambone-Sammy
    </div>

</div>  

这篇关于不能消除包含div内的2个水平div之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！