はお互いの下に複数のdivボックスを追加し、私は評価のウェブサイトを作成しているよ

Question

ルーピングしかし現在、私は彼らがそう見えるように取得するために苦労しています：Desired Result

は現在、私はこの問題を持っている：

ここでCurrent Position

は私のhtml/phpのです：

<div id="center"> 
<?php 
    for ($i = 0; $i<3; $i++) { 
    ?><div class="floating-box">No Content</div> 
    <div class="floating-boxsmall">No Content</div> 
    <?php 
    } 
?> 

ここ

は私の関連するCSSです：

#center { 
    position: fixed; 
    top: 50%; 
    left: 30%; 
    margin-top: -100px; 
    margin-left: -150px; 
} 

.floating-box { 
    float: left; 
    width: 150px; 
    height: 75px; 
    margin: 10px; 
    border: 3px solid #0076be; 
} 
.floating-boxsmall { 
    float: left; 
    width: 150px; 
    height: 15px; 
    margin: 10px; 
    border: 3px solid #0076be; 
} 

任意のヘルプは大幅に私が先に行くと、そのような容器の中にあなたの項目を包むでしょう

Answer 1

を高く評価されています

<?php for ($i = 0; $i<3; $i++) { ?> 
    <div class="floating-item"> 
    <div class="floating-box">No Content</div> 
    <div class="floating-boxsmall">No Content</div> 
    </div> 
<?php } ?> 

がboxからフロートを削除しますboxsmallとし、代わりにfloating-itemに追加してください。

#center { 
    position: fixed; 
    top: 50%; 
    left: 30%; 
    margin-top: -100px; 
    margin-left: -150px; 
} 

.floating-item { 
    float: left; 
} 

.floating-box { 
    width: 150px; 
    height: 75px; 
    margin: 10px; 
    border: 3px solid #0076be; 
} 

.floating-boxsmall { 
    width: 150px; 
    height: 15px; 
    margin: 10px; 
    border: 3px solid #0076be; 
} 

そして、あなたの項目をクリアすることを忘れないでください、将来の頭痛からあなたを救うために：

http://learnlayout.com/clearfix.html

Answer 2

ラップ.floating-boxと.floating-boxsmall親コンテナを持つ：

.parent{ 
    width: 150px; 
    margin:10px; 
    float:left; 
} 

その後親コンテナに割り当てられているため、子コンテナ内でフローティングと最終的に左/右マージンを削除します。あなたのPHPで

.floating-boxsmall{ 
    float:left; 
    margin: 10px 0; 
} 
.floating-box{ 
    float:none; 
    margin:0px; 
} 

：

<?php 
    for ($i = 0; $i<3; $i++) {?> 
    <div class="parent"> 
     <div class="floating-box">No Content</div> 
     <div class="floating-boxsmall">No Content</div> 
    </div> 
    <?php 
    } 
?> 

はこれをテストしていませんが、それは動作するはずです。あなたは確かに親コンテナが必要です。それで遊びます。ここで

Answer 3

#center{ 
 

 
    margin:0px auto; 
 

 
} 
 

 
.floating-box, .floating-boxsmall{ 
 
display:block; 
 
float:left; 
 
    margin:10px 5px; 
 
    background-color:#ccc; 
 
    text-align:center; 
 
    padding:20px; 
 

 
} 
 

 
.floating-box{ 
 
    min-height:100px; 
 
}

<div id="center"> 
 
<div class="floating-box">No Content</div> 
 
    <div class="floating-boxsmall">No Content</div> 
 
    <div class="floating-box">No Content</div> 
 
    <div class="floating-boxsmall">No Content</div> 
 
    <div class="floating-box">No Content</div> 
 
    <div class="floating-boxsmall">No Content</div> 
 
    </div>

fiddle