css3 - 在CSS中,div将不水平对齐

  显示原文与译文双语对照的内容
137 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个 div )的3圆水平对齐。 现在我已经尝试显示: 内联块;以及其他东西似乎无法工作。 我不知道这与fondation框架有什么关系? 我已经尝试了几个小时了,任何帮助都会大大感谢 !

时间: 原作者:

100 4

你把它们分开的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

原作者:
...