php - 如何使用 CSS 设置统一划分，其中列和行划分相等

Question

在我的代码中，我希望我的内容每行 2 个博客。宽度被正确划分，但高度造成了问题。有些博客的标题很大，有些博客的标题很小，因此不打印统一的内容。在某些情况下，它会占用更多空间，结果会影响下一个即将发布的博客。请查看图片以更清楚地了解问题。

如何解决？我想做一些事情，为每个博客提供一些假想的盒子类型的划分，这样它就不会产生缩进问题。

<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:

Answer 1

您好，请检查这些代码并告诉我。

<div class="divide80"></div>
<div class="container">
	<div class="blog-post">
		<?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="row">
			<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>