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 列のアイデアであなたのサイトに実装できると思うアイデアがあります。

%あなたのページに表示される総投稿数のMODを使用してみてはいかがでしょうか。

3 つの列があるため、最初の投稿は最初の列になります。2 番目の投稿が投稿された場​​合、最初の投稿は 2 番目の列に表示されます。

ページに表示される投稿の総数を とする$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 に答える
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 に答える