html - 多个 div 在一行上，间距均匀

Question

我有一个带有几张图片的 slider 。在这个 slider 中，我有一个名为“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

Answer 1

使用float:left; 和margin

请记住，使用 float 会删除您可能已与其父元素建立的任何绝对 定位。为了进一步帮助阐明您究竟需要做什么，我们没有足够的上下文来了解您的其余 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/