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) を水平方向に適切に配置したいと考えています。今、私はディスプレイを試しました：インラインブロック; などがありますが、何も機能していないようです。これが財団フレームワークと関係があるかどうかはわかりませんか？私はこれを何時間も理解しようとしてきましたが、どんな助けも大歓迎です!

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>

あなたのコードでこれを試して、新しいスナップショットをアップロードしてください。

私が気付いたもう1つの間違いは（現在のレイアウトとは関係ありません）：

<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 に答える