Question

嗨我想将两行div对齐，无论上面一行中div的高度如何。我正在使用display:inline-block;，以便div将彼此相邻内联。

这是我得到的

请注意，div＃2略短于div 1

这就是我想要完成的事情

请注意，在第二张图片中，无论div上方的高度如何，第二行仍然应该按照它应该对齐。

这是我的css

.post-set{
max-width:445px;
margin:0px 1px 15px 0px;
padding:0;
display:inline-block;
border-bottom:1px solid #e1e1e1;
vertical-align:top;
}

我在我的wordpress主题中使用它。这是html和php。

<div class="medium-8 column post-set" style="padding:0;">
    <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
                <?php the_post_thumbnail('fifth-post'); ?>
                </a>
          <div class="row column" style="padding:0">
              <h1 class="fifth-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h1>
<div class="fifth-ex">
<?php echo excerpt(18); ?>
</div>

<span class="fifth-by-line"> BY: <?php the_author_posts_link(); ?></span>
</div>
</div>

您可以访问 GetVersed.us 查看实时示例。这是“让你的声音听到横幅”下的部分

有没有办法在不建议砌筑的情况下实现这一目标？

Answer 1

我没有看到您正在使用的HTML。但这里是我的HTML代码和你的CSS类的解决方案。请注意，在CSS中我设置 width 而不是max-width。

我使用内联样式设置的不同高度的div块。它可以在课堂上设置或自动设置。

＆＃13;

.post-set{
  width:60px;
  margin:0px 1px 15px 0px;
  padding:0;
  display:inline-block;
  border-bottom:1px solid #e1e1e1;
  vertical-align:top;
  background-color:black;
}

＆＃13;

<div>
  <div class="post-set" style="height:20px;">
    
  </div>
  <div class="post-set" style="height:35px;">

  </div>
</div>
<div>
  <div class="post-set" style="height:15px;">


  </div>
  <div class="post-set" style="height:30px;">

  </div>
</div>

＆＃13;

Answer 2

您可以创建一个简单的表格并按如下方式放置div：

 <table>
     <tbody>
         <tr>
             <td>
                <div 1...>
             </td>
             <td>
                <div 2...>
             </td>
         </tr>   
         <tr>
             <td>
                <div 3...>
             </td>
             <td>
                <div 4...>
             </td>
         </tr>   
    </tbody>
</table>

这将确保对齐符合您的意愿。如果愿意，您可以添加一些样式。

Answer 3

您应该查看flexbox。

HTML：

<div class="item_container">
  <div class="item">

  </div>
  <div class="item">

  </div>
</div>
<div class="item_container">
  <div class="item">


  </div>
  <div class="item">

  </div>
</div>

CSS：

.item_container {
  display:flex; align-items:stretch;
}
.item { float:left; }

使用css将div与不同高度对齐

3 个答案: