0

所以我无法对齐页面上的 3 个圆形 div。

这是HTML

<div class="row">
<div class="large-9 push-2 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>



<div class="row">
<div class="large-9 push-4 columns">

<div class="cyan"></div>
<a href="#">Recevez</a>


</div>
</div>

<div class="row">
<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>
</div>
</div>

这是CSS：

.green, .cyan, .orange  {
    border-radius: 50%;
    width: 15px;
    height: 15px; 
    position: relative;
    float: left;

}
.green  {
background: #40b564;


}
.cyan   {
background: #61cfcc;

}

.orange {
background: #f8765c;

}

这是它的样子：

http://4.ii.gl/V0DOyL.png

我基本上希望 3 个圆圈（3 个 div）水平正确对齐。现在我尝试了 display : inline-block; 和其他东西，但似乎没有任何效果。不知道这跟基金会框架有没有关系？我已经尝试解决这个问题几个小时了，任何帮助将不胜感激！

4

1 回答 1

1

您将它们分开class="rows"，这就是为什么它们分开的原因。您必须将它们放在一行中。

<div class="row">
<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

</div>

在你的代码中试试这个，上传一个新的快照，我会看看我是否能再帮忙。

我注意到的另一个错误是（与您当前的布局无关）：

<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>

你正在做large-9 push-6，总数不应该超过12。在你的情况下它是9 + 6 = 15，它应该是这样large-9 push-3, large-8 push-4 or large-6 push-6的，所以总数总是12

于 2013-10-09T05:04:14.900 回答