2016-06-10 37 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

我已检查此代码,但问题仍然存在。 –