cssを使用して異なる高さのdivを整列する

Question

こんにちは私は上の行のdivの高さに関係なく、divの2つの行をお互いに整列させたいと思います。私はdisplay:inline-block;を使用しているので、divは互いに隣り合っています。ここで

は、私はDIV＃2は、divの1

よりやや短く、ここで私は

enter image description here

を達成したいものであることを

Photo 1

お知らせを得ているものです

2番目の画像では、上のdivの高さに関係なく、2番目の行はまだ必要に応じて整列します。

は、ここに私のcss

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

私は私のワードプレスのテーマでこれを使用しています。ここでPHPと一緒にhtmlです。

<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では、最大幅の代わりにの幅をに設定しています。

divブロックの高さが異なるインラインスタイルを使用して設定しました。それはクラスまたは自動で設定することができます。

.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; 
 
}

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

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; }