0

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

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

将 div 垂直推到一起

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

根据要求，这是使用数据库中的内容填充 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 -->
                    ';}

    ?>
4

2 回答 2

0

做3列：

密码笔

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>';  
 //column2
 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); 

                    ?>
于 2013-10-29T13:34:01.050 回答
0

我有一个想法，我认为您可以使用 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
    }
}

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

于 2013-10-30T11:24:56.207 回答