【问题标题】：Multiple Divs On One Line With Even Spacing同一行上的多个 div，间距均匀
【发布时间】：2014-01-22 12:39:11
【问题描述】：

我有一个带有几张图片的滑块。在这个滑块里面，我有一个名为“sb-bolas”的 div，在这个 div 里面，我创建了一个新的 div，我有一个圆圈，在这个圆圈里面我想插入一些文本。但我需要创建超过 1 个圆圈，并且我希望每个圆圈之间有相同的空间。

我该怎么做？

HTML

<div class="sb-bolas">
   <div class="bolas-grad">something</div>
   <div class="bolas-grad">something</div>
   <div class="bolas-grad">something</div>
</div>

CSS

.sb-bolas {
    padding: 10px;
    bottom: 50px;
    left: 100px;
    right: 100px;
    z-index: 1000;
    position: absolute;
    background: #CBBFAE;
    background: rgba(190,176,155, 0.4);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);   
    opacity: 0;
    color: #fff;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}
.bolas-grad {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    opacity: 0.7;
    filter: alpha(opacity=40);
    background: linear-gradient(to bottom, #007EFF, #09f);
    font-size: 12px;
    color: #fff;
    line-height: 100px;
    text-align: center;
}

*更新**

Image

【问题讨论】：

问题是 position:absolute，它们总是绝对定位在最近的 position:relative 父元素的范围内。您应该将它们相对定位并以相等的边距向左浮动。
第一个div不需要是绝对的吗？我只是添加了相对于我的子 div 的位置，左浮动..但没有解决
你能设置一个jsfiddle.net
@dwhite.me 请看一下
作为我之前的评论，你能设置一个jsfiddle.net

标签： html css

【解决方案1】：

使用`float:left;` 和`margin`

请记住，使用 float 将删除您可能与其父元素建立的任何 absolute 定位。为了进一步帮助澄清您究竟需要做什么，我们没有足够的上下文来说明您的其余 HTML。如果您需要更详细的答案，请提供更详细的代码。

在这里查看：http://jsfiddle.net/SinisterSystems/qwA32/2/

HTML：

<div class="slideshow">
    <div class="slide" style="background:#C00;">

    </div>

    <div class="slide" style="background:#0C0;">

    </div>

    <div class="slide" style="background:#00C;">

    </div>

</div>

CSS：

.slideshow {
    position:absolute;
    top:0;
    left:0;
}

div.slide {
    float:left; //        <------- Here
    margin-right:50px; // <------- Here

    width: 100px;
    height: 100px;
    border-radius:50px;
    opacity:0.7;
    filter:alpha(opacity=40);
    background:linear-gradient(to bottom, #007EFF, #09f);
    font-size:12px;
    color:#fff;
    line-height:100px;
    text-align:center;
}

在这里查看：http://jsfiddle.net/SinisterSystems/qwA32/2/

【讨论】：

这怎么行？它完全按照您在顶部所描述的...您看过小提琴...？
现在开始工作了！这是一个阻塞的wordpress标签。非常感谢！

【解决方案2】：

添加属性

display:inline-block;

到.bolas-grad班级，让圆圈在同一行。

要让偶数空格添加margin 到类.bolas-grad

【讨论】：

使用float:left; 和margin

在这里查看：http://jsfiddle.net/SinisterSystems/qwA32/2/

在这里查看：http://jsfiddle.net/SinisterSystems/qwA32/2/

使用`float:left;` 和`margin`