Question

我很长一段时间以来一直在寻找解决方案。如何将div垂直推到一起（参见附图）。

有人建议使用特定的CSS编码，但在这种情况下这并不好，因为没有设置div高度 - 它会根据加载的内容而改变。

push divs together vertically

------------------添加信息------------------

根据要求，这是使用数据库中的内容填充div的代码。 div只需要按照附图所示向上推。

<?php 

require_once('../scripts/include.php');
$who = 65; //temp value to be deleted

            $result = mysql_query(
            "SELECT 

            tbl_status.id as statID, 
            tbl_status.from_user as statFROM, 
            tbl_status.status as statSTATUS, 
            tbl_status.deleted as statDEL, 
            tbl_status.date as statDATE,

            tbl_users.id as usrID, 
            tbl_users.name as usrNAME,
            tbl_users.location as usrLOCATION,

            tbl_photos.profile as photosPROFILE,
            tbl_photos.photo_link as photoLINK,
            tbl_photos.default_photo as photoDEFAULT 

            FROM tbl_status 
            LEFT JOIN tbl_users ON tbl_status.from_user = tbl_users.id

            LEFT JOIN tbl_photos ON tbl_photos.profile = tbl_users.id 
            WHERE tbl_status.deleted = '0' AND tbl_photos.default_photo IS NULL OR tbl_photos.default_photo = '1'
            ORDER BY tbl_status.date desc
            LIMIT 24

            ");

                while($row = mysql_fetch_array($result))
                  {          

                    $sampleText = $row['statSTATUS'];
                    $pattern = '/#[a-zA-Z0-9]*/';
                    $replacement = '<a href="../search/term.php?$0" class="hashSearch">$0</a>';
                    $updatedText = preg_replace($pattern, $replacement ,$sampleText);

                    echo'
                    <div class="statusCont" style="width:150px;">

                        <div class="statusUsr">' . $row['usrLOCATION'] . '</div>
                        <div class="statusTxt"><p>' . $updatedText . '</p></div>
                        <div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
                        background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>

                    </div><!-- ends .statusCont -->
                    ';}

    ?>

Answer 1

做3列：

Codepen

HTML

<div id="col1" class="col">
  <div id="rand1"></div>
  <div id="rand2"></div>
</div>

<div id="col2" class="col">
  <div id="rand3"></div>
  <div id="rand4"></div>
</div>

<div id="col3" class="col">
  <div id="rand5"></div>
  <div id="rand6"></div>
</div>

CSS

.col {
  width:100px;
  float:left;
  margin-left:10px

}

#rand1 
{
 height:90px;
 background: pink; 

}

#rand2 
{
   height:100px;
 background: green; 

}

#rand3 
{
  height:200px;
 background: grey; 

}

#rand4
{
 height:200px;
 background: red;  

}

#rand5 
{
 height:300px;
 background: green; 

}

#rand6 
{
  height:150px;
  background: red;

}

PHP

        <?php
     $i=1;
     $sampleText = array();
     $pattern = array();
     $replacement = array();
     $updatedText = array();
     while($row = mysql_fetch_array($result))
                      {          

                        $sampleText[$i] = $row['statSTATUS'];
                        $pattern[$i] = '/#[a-zA-Z0-9]*/';
                        $replacement[$i] = '<a href="../search/term.php?$0" class="hashSearch">$0</a>';
                        $updatedText[$i] = preg_replace($pattern, $replacement ,$sampleText[$i]);


               $Myvar[$i] ='<div class="statusCont" style="width:150px;">

                            <div class="statusUsr">' . $row['usrLOCATION'] . '</div>
                            <div class="statusTxt"><p>' . $updatedText[$i] . '</p></div>
                            <div class="statBackground" style="background-image:url(../assets/uploads/resized_' . $row['photoLINK'] .');
                            background-repeat:no-repeat; background-size:100%;width:150px; height:50px; opacity:1;"></div>
                        </div>';                    
                $i++;                      
                       }
    $col1=1;
$col2=2;
$col3=3;
$i=$i-1;
//column2
echo '<div  class="col">';
        while($col1<=$i) {

                echo $Myvar[$col1] ;           

            $col1=$col1+3;     

        }
 echo '</div>';  
 //culomn2
 echo '<div  class="col">';
        while($col2<=$i) {

                echo $Myvar[$col2]  ;          

            $col2=$col2+3;     

        }
 echo '</div>'; 
 //column 3
 echo '<div  class="col">';
        while($col3<=$i) {

                echo $Myvar[$col3]  ;          

            $col3=$col3+3;   
        }
 echo '</div>';  

print_r ($Myvar); 

                    ?>

Answer 2

我有一个想法，我认为您可以在您的网站中实现3列的想法。

如何使用页面上显示的总帖子的MOD %。

由于您有3列，因此第一篇文章将位于第一列。如果第二个帖子发布，第一个帖子将显示在第二列，等等。

让页面上显示的帖子总数为$total。并将当前数字设为$current。

$total; // the total divs will be displaying in the page

for ($current = 1; $currrent < $total+1; $current++)
{
    if($current % 3 == 1)
    {
        //the code php or javascript to display <div> in column 1
    }
    else if($current % 3 == 2)
    {
        //the code php or javascript to display <div> in column 2
    }
    else if($current % 3 == 0)
    {
        //the code php or javascript to display <div> in column 3
    }
}

如果我在代码中犯了错误，请原谅我，但是你明白了。

如何将<divs>一起垂直推送？</divs>

2 个答案: