Question

我有3个Div，我希望在一些图像下精确地间隔排列。我试图摆弄浮动它们并使用保证金，但我不知道如何达到可以从左边距指定多个像素的点。

<div class="cont1" style="margin-left:100px; float:left;"> label </div>
<div class="cont2" style="margin-left:200px; float:left;"> label </div>
<div class="cont3" style="margin-left:300px;"> label </div>

使用float：left似乎搞砸了很多间距。没有它，间距是正确的，但每个div都在一条新线而不是一条线上。

Answer 1

我认为您希望第二个div cont2距离窗口左侧200像素，实际上它距离第一个div的左边200像素。

如果这是你想要的，你应该使用绝对定位：

.cont1 {
    background-color: red;
    position: absolute;
    top: 0;
    left: 100px;
    max-width: 100px;
}
.cont2 {
    background-color: blue;
    position: absolute;
    top: 0;
    left: 200px;
    max-width: 100px;
}
.cont3 {
    background-color: green;
    position: absolute;
    top: 0;
    left: 300px;
    max-width: 100px;
}

http://jsfiddle.net/mblase75/vZK7N/1/

Answer 2

<div>是一个块级元素，因此float: left;是让它们并排坐下的好方法。

就间距而言，元素浮动后边距会小得多，因为每个<div>将在之后定位。

Answer 3

使用Span而不是div，它可能会起作用。 Div将始终在新行中对齐。

CSS间距精确

3 个答案: