0

我正在尝试在容器 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;
 }

在此处输入图像描述

提前致谢

4

2 回答 2

2

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

演示

<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属性的单个容器中，这样您的元素就不会在宽度不足的情况下换行

于 2013-05-04T13:06:49.003 回答
0

外星人先生说的没有错，但是

我很难让它们均匀分布

如果你有3 个div 想要沿着容器的整个宽度分布，你可以将最左边的 div 浮动到左边，最右边的 div 到右边，中间的 div 会得到float:noneand 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。

编辑：更新的小提琴 - 没有保存......

于 2013-05-04T13:19:16.123 回答