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:
圖2:
您需要添加行每一列,使用的是「行」的循環之外。 –
如果可能,您可以提供您上傳代碼的實時鏈接。 –
我還沒有上傳它,我在本地主機上運行。 @SayedRafeeq –