플로트를 우회하는 방법 : 왼쪽; <a href="https://1stamender.com/testing-elements.php" rel="nofollow noreferrer">https://1stamender.com/testing-elements.php</a></p> <p>이 기본적으로 내 사이트에서 최신 문서 목록이며, 지금 내가 개선하기 위해 찾고 있어요 UI를 가지고 : 석조 레이아웃 여기

Question

의 행동은 내가 일하고 페이지입니다. 지금은 부트 스트랩과 내 자신의 CSS를 사용하여 정의했고 솔루션을 찾지 못하는 것 같습니다. 기본적으로 divs가 float : left;을 처리한다는 고유 한 방식으로 인해 펑키 한 간격이 있음을 알 수 있습니다.

div를 새로운 행으로 푸시하는 대신 위의 div로 밀어 넣어 어색한 간격을 두십시오. 높이를 설정하면 문제를 해결할 수 있지만 높이는 일반적으로 기사마다 다릅니다.

I하지 어떻게 영원히 인터넷 검색을 봤는데 현명이 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

당신은 세 가지 변수를 사용할 수 있습니다 각 열에 대해 항상 사용 된 열을 토글하거나 CSS 열을 사용할 수는 있지만 게시물 순서를 위에서 아래로 변경할 수 있습니다.

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