Question

我指的是我在SO上找到的那个使用display: inline-block;的小提琴，我已将它应用到我自己的作品中，但我无法弄清楚如何让两个div并排放在一起，而不是与3-4px的差距？

我试过了：

HTML

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

CSS

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container div {
    display: inline-block;
}

但什么都没有。

Answer 1

实际上你不必在css中改变任何东西以避免差距，

这是HTML中的空白问题，

将html更改为此

<div class="container">
        <div class="left">LEFT
        </div><div class="right">RIGHT
        </div>
</div>

jsFiddle here

OR

你可以编辑你的CSS

您可以使用float:left;代替display:inline-block;来消除空白问题。

Answer 2

如果设置display：inline-block;然后添加margin-right: -4px;以消除差距。

see this demo

Answer 3

我会使用float:left，但也尝试将div.left和div.right上的边距设置为0，如：

margin:0 auto;

所以，小提琴：

div.left {
    background:blue;
    height:200px;
    width:300px;
    margin:0 auto;
    float:left;
}

Answer 4

使用2 span（现在是div），制作内联块，不要在它们之间留下任何空格或新行。使用spans不是div，因为一些旧的不能使用div这样的默认块元素生成内联块元素。

喜欢这样：

<span style="display: inline-block">one</span><span style="display: inline-block">two</span>

不喜欢这样：

<span style="display: inline-block">one</span> <span style="display: inline-block">two</span>

Answer 5

相反使用display:inline-block您可以float div's，只需将css更改为

.container div {
float:left;
}

上面的代码应该得到所需的结果。它会使div彼此相邻，没有任何空格。

请参阅以下链接，了解导致空格的原因或float和display:inline block

Reference 1

Reference 2

并排divs没有间隙？

5 个答案: