1

我指的是我在 SO 上找到的这个小提琴display: inline-block;，我已经将它应用到我自己的工作中，但我不知道如何让两个 div 并排齐平，而不是用 3-4px 的间隙？

http://jsfiddle.net/zygnz/1/

我试过了：

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;
}

但一无所获。

4

5 回答 5

2

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

这是 HTML 中的空白问题，

把html改成这个

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

jsFiddle在这里

或者

你可以编辑你的CSS

您可以使用float:left;而不是display:inline-block;消除空白问题。

于 2013-10-01T11:47:23.310 回答
2

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

margin:0 auto;

所以，用你的小提琴：

div.left {
    background:blue;
    height:200px;
    width:300px;
    margin:0 auto;
    float:left;
}
于 2013-10-01T11:48:19.547 回答
1

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

看这个演示

于 2013-10-01T11:42:04.193 回答
1

使用 2 个跨度（现在是 div），制作内联块，不要在它们之间留下任何空格或换行符。使用 spans 而不是 div，因为一些旧的 ies 无法从默认的块元素（如 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>
于 2013-10-01T11:54:42.803 回答
0

而是使用display:inline-block你可以float的div's，只需更改css为

.container div {
float:left;
}

上面的代码应该得到所需的结果。它将div右对齐，没有任何空格。

请参阅下面的链接以查看导致空白的原因或大约float和display:inline block

参考1

参考文献 2

于 2013-10-01T11:58:39.300 回答