在容器div中浮动3个div

Question

我试图在容器div中浮动3个div。我觉得这很简单，但我很难让它们均匀分开。因为我希望网站有点响应，所以我不能在px中指定间距。

CSS：

#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}

.circle{width:200px;height:200px;border-radius:100px; 
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8); 
margin:auto; display:inline-block; vertical-align:middle;
 }

提前致谢

Answer 1

将它们放在3个div元素中，每个元素的宽度为33%，并在圆形div上使用margin: auto;，这样它们就会相等。

Demo

<div class="wrap_me">
    <div></div>
</div>
<div class="wrap_me">
    <div></div>
</div>
<div class="wrap_me">
    <div></div>
</div>

CSS

.wrap_me {
    width: 33%;
    border: 1px solid #f00;
    float: left;
}

.wrap_me div {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    border: 1px solid #ddd;
    margin: auto;
}

您也可以在具有min-width属性的单个容器中保存它，这样您的元素就不会包裹宽度不足

Answer 2

Alien先生所说的并没有错，但是

  

我很难让它们均匀分开

如果你想要沿容器的整个宽度分配三个 div，你可以将最左边的div浮动到左边，最右边的div浮动到右边，中间div将获得float:none和margin: auto，如下所示：

.container {
    width: 300px;
    height: 100px;
}

.container div {
    width: 25%;
    height: 100%;
    background: blue;
    border-radius: 100%;
}

.inner-left {
    float: left;
}

.inner-middle {
    float: none;
    margin: auto;
}

.inner-right{
    float: right;
    position: relative;
    bottom: 100%;
}

请参阅 jsfiddle 。

修改： 更新小提琴 - 没有保存...