2016-06-10 38 views
0

在我的代碼中,我希望我的內容在每行2個博客。寬度被正確劃分,但高度正在產生問題。一些博客有很大的標題,有些博客由於這種統一的內容不打印而很小。我遇到一些情況,它會佔用更多空間,並且會影響下一個即將到來的博客請看圖像更清楚的問題。如何設置統一劃分使用CSS以及列劃分等於

如何解決?我想做一些爲每個博客提供一些虛構的盒子類型劃分,這樣它就不會產生縮進問題。

<div class="divide80"></div> 
<div class="container"> 
    <div class="row"> 
    <?php $i=1; include('admind/connect.php'); if(isset($_GET[ "page"])){ $page=$ _GET[ "page"]; } else{ $page=1; } $page1=($page-1)*6; ?> 
    <?php $select="select * from blogs order by blog_id desc limit $page1,6" ; $run=mysql_query($select); while($row=mysql_fetch_array($run)) { $blog_id=$row[ 'blog_id']; $blog_title=$row[ 'blog_title']; $blog_date=$row[ 'blog_date']; $blog_author=$row[ 
    'blog_author']; $blog_image=$row[ 'blog_image']; $blog_content=substr($row[ 'blog_content'],0,170); ?> 
    <?php if($i%2==1) { ?> 

    <div class="col-xs-6"> 
     <a href="pagesd.php?id=<?php echo $blog_id; ?>"> 
     <div class="item-img-wrap"> 
      <center> 
      <img src="imaged/<?php echo $blog_image; ?>" width="150px" height="200px" /> 
      </center> 
      <div class="item-img-overlay"> 
      <span></span> 
      </div> 
     </div> 
     </a> 
     <!--work link--> 
     <ul class="list-inline post-detail"> 
     <li>by 
      <?php echo $blog_author; ?> 
     </li> 
     <li><i class="fa fa-calendar"></i> 
      <?php echo $blog_date; ?> 
     </li> 
     </ul> 
     <h4><?php echo $blog_title; ?></h4> 
     <p> 
     <?php echo $blog_content; ?> 
     </p> 
     <p><a href="pagesd.php?id=<?php echo $blog_id; ?>" class="btn btn-theme-dark"> 
            Read more </a> 
     </p> 
     <hr> 

    </div> 

    <?php $i=$i+1; } else { ?> 

    <div class="col-xs-6"> 
     <a href="pagesd.php?id=<?php echo $blog_id; ?>"> 
     <div class="item-img-wrap"> 
      <center> 
      <img src="imaged/<?php echo $blog_image; ?>" width="150px" height="200px" /> 
      </center> 
      <div class="item-img-overlay"> 
      <span></span> 
      </div> 
     </div> 
     </a> 
     <!--work link--> 
     <ul class="list-inline post-detail"> 
     <li>by 
      <?php echo $blog_author; ?> 
     </li> 
     <li><i class="fa fa-calendar"></i> 
      <?php echo $blog_date; ?> 
     </li> 
     </ul> 
     <h4><?php echo $blog_title; ?></h4> 
     <p> 
     <?php echo $blog_content; ?> 
     </p> 
     <p><a href="pagesd.php?id=<?php echo $blog_id; ?>" class="btn btn-theme-dark"> 
              Read more </a> 
     </p> 
     <hr> 
    </div> 

    <?php } $i=$i+1; } ?> 
    </div> 
</div> 
</div> 

圖1:

Image 1


圖2:

Image 2

+0

您需要添加行每一列,使用的是「行」的循環之外。 –

+0

如果可能,您可以提供您上傳代碼的實時鏈接。 –

+0

我還沒有上傳它,我在本地主機上運行。 @SayedRafeeq –

回答

0

嗨選中此這些代碼,讓我KN流。

<div class="divide80"></div> 
 
<div class="container"> 
 
\t <div class="blog-post"> 
 
\t \t <?php $i=1; include('admind/connect.php'); if(isset($_GET[ "page"])){ $page=$ _GET[ "page"]; } else{ $page=1; } $page1=($page-1)*6; ?> 
 
\t \t <?php $select="select * from blogs order by blog_id desc limit $page1,6" ; $run=mysql_query($select); while($row=mysql_fetch_array($run)) { $blog_id=$row[ 'blog_id']; $blog_title=$row[ 'blog_title']; $blog_date=$row[ 'blog_date']; $blog_author=$row[ 
 
\t 'blog_author']; $blog_image=$row[ 'blog_image']; $blog_content=substr($row[ 'blog_content'],0,170); ?> 
 
\t \t <?php if($i%2==1) { ?> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <a href="pagesd.php?id=<?php echo $blog_id; ?>"> 
 
\t \t \t \t <div class="item-img-wrap"> 
 
\t \t \t \t <center> 
 
\t \t \t \t \t <img src="imaged/<?php echo $blog_image; ?>" width="150px" height="200px" /> 
 
\t \t \t \t </center> 
 
\t \t \t \t <div class="item-img-overlay"> 
 
\t \t \t \t \t <span> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </a> 
 
\t \t \t <!--work link--> 
 
\t \t \t <ul class="list-inline post-detail"> 
 
\t \t \t \t <li>by 
 
\t \t \t \t <?php echo $blog_author; ?> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t <i class="fa fa-calendar"> 
 
\t \t \t \t </i> 
 
\t \t \t \t <?php echo $blog_date; ?> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t \t <h4> 
 
\t \t \t \t <?php echo $blog_title; ?> 
 
\t \t \t </h4> 
 
\t \t \t <p> 
 
\t \t \t \t <?php echo $blog_content; ?> 
 
\t \t \t </p> 
 
\t \t \t <p> 
 
\t \t \t \t <a href="pagesd.php?id=<?php echo $blog_id; ?>" class="btn btn-theme-dark"> 
 
\t \t \t \t Read more 
 
\t \t \t \t </a> 
 
\t \t \t </p> 
 
\t \t \t <hr> 
 
\t \t \t </div> 
 
\t \t \t <?php $i=$i+1; } else { ?> 
 
\t \t \t <div class="col-xs-6"> 
 
\t \t \t <a href="pagesd.php?id=<?php echo $blog_id; ?>"> 
 
\t \t \t \t <div class="item-img-wrap"> 
 
\t \t \t \t <center> 
 
\t \t \t \t \t <img src="imaged/<?php echo $blog_image; ?>" width="150px" height="200px" /> 
 
\t \t \t \t </center> 
 
\t \t \t \t <div class="item-img-overlay"> 
 
\t \t \t \t \t <span> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </a> 
 
\t \t \t <!--work link--> 
 
\t \t \t <ul class="list-inline post-detail"> 
 
\t \t \t \t <li>by 
 
\t \t \t \t <?php echo $blog_author; ?> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t <i class="fa fa-calendar"> 
 
\t \t \t \t </i> 
 
\t \t \t \t <?php echo $blog_date; ?> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t \t <h4> 
 
\t \t \t \t <?php echo $blog_title; ?> 
 
\t \t \t </h4> 
 
\t \t \t <p> 
 
\t \t \t \t <?php echo $blog_content; ?> 
 
\t \t \t </p> 
 
\t \t \t <p> 
 
\t \t \t \t <a href="pagesd.php?id=<?php echo $blog_id; ?>" class="btn btn-theme-dark"> 
 
\t \t \t \t Read more 
 
\t \t \t \t </a> 
 
\t \t \t </p> 
 
\t \t \t <hr> 
 
\t \t \t </div> 
 
\t \t \t <?php } $i=$i+1; } ?> 
 
\t \t </div> 
 
\t </div> 
 
</div>

+0

我已檢查此代碼,但問題仍然存在。 –