フロートを回避する方法：left;石工のレイアウトでの動作

Question

ここでは、私が働いているページです。 https://1stamender.com/testing-elements.php

これは基本的に自分のサイトの最新記事の一覧で、今、私は私が改善しているよUIを持っています。今私はそれをブートストラップと自分自身のCSSを使用して定義されていると解決策を見つけるように見えることができません。 基本的には、divsがfloat：left;を処理するという本質的な方法のために、いくつかのファンキースペーシングがあることがわかります。

divを新しい行にプッシュします。それより上のdivにプッシュしようとすると、いくつかの不自然な間隔が残ってしまいます。これは高さを設定することで修正できますが、高さは一般に記事ごとに異なります。

私は...永遠

編集グーグルでてきた賢明このCSSを行うにはどのようにかすかなアイデアを持っていない：私はあなたがコード自体を見たいと思って知って謝罪：

echo ' 
       <div class="articlecontainer"> 
        <div class="articlepicture2"> 
         <a href="article.php?articlenumber='.$articlenumber.'"><img src="'.$mainpic.'" alt="'.$headline.'" width="100%"></a> 
        </div> 
        <div class="articledescription2"> 
         <a href="article.php?articlenumber='.$articlenumber.'" class="articlelink2"><strong><span class="headlinearticle2">'.$headline.'</span></strong><br> 
         '.substr($content,0,100).'...</a> 
         <hr> 
         Written by: '; 
         $sqlauthor = "SELECT * FROM ACCOUNT WHERE USERNAME='$articleauthor'"; 
         $resultauthor = $conn->query($sqlauthor); 
         if ($resultauthor->num_rows > 0) { 
           // output data of each row 
           $rowauthor = $resultauthor->fetch_assoc(); 
           $authordisplayname = $rowauthor['DISPLAYNAME']; 
           echo '<i>'.$authordisplayname.'</i><br>'; 
           echo 'Overall Rating: '; 
           echo '<img src="images/main/rating/'.$star.'.png" alt="Rating 0.5" width="80">'; 
         } 

         echo ' 
        </div> 
       </div> 

      '; 

をCSS：

.articlecontainer{ 
background-color: #666; 
border: solid 1px #000; 
color: #fff; 
padding: 0px !important; 
margin-left: 20px; 
margin-right: 20px; 
margin-top: 10px; 
margin-bottom: 10px; 
padding-bottom:10px !important; 
border-radius: 5px; 
width: 25%; 
float: left; 

Answer 1

次の3つの変数を使用できますそれぞれの列に対して、常に使用済みのものを切り替えるか、またはcss-columnsを使用することができますが、posts-orderを上から下に変更します。

CSS-カラム：https://developer.mozilla.org/en-US/docs/Web/CSS/columns
PHP：このような何か：

$column = 1; 
$column_1_html = ""; 
$column_2_html = ""; 
$column_3_html = ""; 
foreach($boxes => $box) { 
    $box_html = "..."; 
    if($column == 1) { 
     $column = 2; 
     $column_1_html .= $box_html; 
    } else if($column == 2) { 
     $column = 3; 
     $column_2_html .= $box_html; 
    } else if($column == 3) { 
     $column = 1; 
     $column_3_html .= $box_html; 
    } 
} 

このライブラリはあなたのために何かあるかもしれないコメントで述べたように：https://masonry.desandro.com/layout.html