複数のdivの中の線要素

Question

ブロック内の各被写体を同じ高さに揃えたい。 サブジェクトとは、タイトル、コンテンツ、ボタンのことです。最大の問題はボタンです。私がクラスを与えるとき.content高さは私が変更解像度の私のウィンドウのズームを変更するまで、素敵に見えます。

ご協力いただきありがとうございます。

#information_blocks { 
 
    display: flex; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    width: 100%; 
 
    background-color: rgba(215, 201, 187, 0.9); 
 
    box-shadow: inset 0 20px 20px -20px black; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    -webkit-justify-content: space-around; 
 
    justify-content: space-around; 
 
} 
 

 
.block { 
 
    /*border: 1px solid #adadad;*/ 
 
    display: inline-block; 
 
    flex: 1 1 0 100%; 
 
    width: 20%; 
 
    margin-left: 10%; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0; 
 
    height: auto; 
 
} 
 

 
.block:first-child { 
 
    margin-left: 9%; 
 
    float: left; 
 
} 
 

 
.block:last-child { 
 
    float: right; 
 
    margin-right: 10%; 
 
} 
 

 
.block .container { 
 
    display: block; 
 
    flex: 1 1 100% 0; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.block .container:last-child { 
 
    margin-top: 5%; 
 
    height: 20%; 
 
} 
 

 
.block .container .title { 
 
    display: block; 
 
    font-size: 1.5em; 
 
    color: #1b6d85; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.block .container .content { 
 
    display: block; 
 
} 
 

 
.block .container .button { 
 
    display: block; 
 
    margin: auto auto auto auto; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: #1b6d85; 
 
    color: white; 
 
    line-height: 45px; 
 
}

<div id="information_blocks"> 
 

 
    <div class="block"> 
 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 

 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 
    </div> 
 
    <div class="block"> 
 

 

 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
       dsfdscsdcdscs 
 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 

 

 
    </div> 
 
    <div class="block"> 
 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 
    </div> 
 

 

 
</div>

Answer 1

あなたは.block .container:last-childにflex: 0 0 autoを与え、ボタンからheight: 20%を削除する必要があります。

は作業スニペット（これはあなたが探しているものである希望）を見てください：

#information_blocks { 
 
    display: flex; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    width: 100%; 
 
    background-color: rgba(215, 201, 187, 0.9); 
 
    box-shadow: inset 0 20px 20px -20px black; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    -webkit-justify-content: space-around; 
 
    justify-content: space-around; 
 
} 
 

 
.block { 
 
    /*border: 1px solid #adadad;*/ 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    margin-left: 10%; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    background-color: rgba(255, 255, 255, 0.8); 
 
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0; 
 
    justify-content: space-between; 
 
} 
 

 
.block:first-child { 
 
    margin-left: 9%; 
 
} 
 

 
.block:last-child { 
 
    margin-right: 10%; 
 
} 
 

 
.block .container { 
 
    flex: 1; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.block .container:last-child { 
 
    flex: 0 0 auto !important; 
 
    margin-top: 5%; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.block .container .title { 
 
    font-size: 1.5em; 
 
    color: #1b6d85; 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.block .container .content {} 
 

 
.block .container .button { 
 
    margin: auto auto auto auto; 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color: #1b6d85; 
 
    color: white; 
 
    line-height: 45px; 
 
}

<div id="information_blocks"> 
 

 
    <div class="block"> 
 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 

 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 
    </div> 
 
    <div class="block"> 
 

 

 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
       dsfdscsdcdscs 
 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 

 

 
    </div> 
 
    <div class="block"> 
 
     <div class="container"> 
 
      <div class="title"> 
 
       Social media 
 
      </div> 
 
      <div class="content"> 
 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
 
      </div> 
 
     </div> 
 

 
     <div class="container"> 
 
      <div class="button">Learn more</div> 
 
     </div> 
 
    </div> 
 

 

 
</div>

・ホープ、このことができます！

Answer 2

あなたは全体を再構成する必要があります、私は恐れています。 padding-bottom: 100px;とposition: relative;を追加するhttps://jsbin.com/riyemizaqi/edit?html,css,output

Answer 3

これを解決するための別の方法は次のとおりです。

HTML

<div class="display-table"> 
    <div class="display-table-row"> 
     <div class="display-table-cell"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
     </div> 
     <div class="display-table-cell"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam Lorem ips 
     </div> 
     <div class="display-table-cell"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing. Aenean massa. Cum sociis natoque penatibus et 
     </div> 
    </div> 
    <div class="display-table-row"> 
     <div class="display-table-cell"> 
      <button> 
       button 
      </button> 
     </div> 
     <div class="display-table-cell"> 
      <button> 
       button 
      </button>  </div> 
     <div class="display-table-cell"> 
      <button> 
       button 
      </button>  
     </div> 
    </div> 
</div> 

CSS

.display-table { 
    display: table; 
    table-layout: fixed; 
} 

.display-table-row { 
    display: table-row; 
} 

.display-table-cell { 
    display: table-cell; 
    vertical-align: top; // change this to "middle" if you want to vertically align the content 
    width: 1%; 
} 

JSBIN：私はそのためのテーブルのような構造を使用することをお勧めします.block要素に、次にposition: absolute;.buttonに設定します。

作業中here。

CSSの改正：回答自己完結型を維持するには、以下の

.block { 
    padding-bottom: 100px; 
    position: relative; 
} 

.button { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom: 20px; 
} 

コード全体。

<div id="information_blocks"> 

    <div class="block"> 
     <div class="container"> 
      <div class="title"> 
       Social media 
      </div> 
      <div class="content"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 

      </div> 
     </div> 

     <div class="container"> 
      <div class="button">Learn more</div> 
     </div> 
    </div> 
    <div class="block"> 


     <div class="container"> 
      <div class="title"> 
       Social media 
      </div> 
      <div class="content"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
       dsfdscsdcdscs 
      </div> 
     </div> 

      <div class="container"> 
      <div class="button">Learn more</div> 
     </div> 


    </div> 
    <div class="block"> 
     <div class="container"> 
      <div class="title"> 
       Social media 
      </div> 
      <div class="content"> 
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean 
       massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
      </div> 
     </div> 


      <div class="container"> 
      <div class="button">Learn more</div> 
     </div> 

    </div> 


</div> 

#information_blocks { 
    display: flex; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    width: 100%; 
    background-color: rgba(215, 201, 187, 0.9); 
    box-shadow: inset 0 20px 20px -20px black; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
} 

.block { 
    /*border: 1px solid #adadad;*/ 
    display: inline-block; 
    flex: 1 1 0 100%; 
    width: 20%; 
    margin-left: 10%; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    background-color: rgba(255, 255, 255, 0.8); 
    box-shadow: rgba(0, 0, 0, 0.74902) 0 0 15px 0; 
    height: auto; 
    padding-bottom: 100px; 
    position: relative; 
} 

.block:first-child { 
    margin-left: 9%; 
    float: left; 
} 

.block:last-child { 
    float: right; 
    margin-right: 10%; 
} 

.block .container { 
    display: block; 
    flex: 1 1 100% 0; 
    text-align: center; 
    width: 100%; 
} 

.block .container:last-child { 
    margin-top: 5%; 
    height: 20%; 
} 

.block .container .title { 
    display: block; 
    font-size: 1.5em; 
    color: #1b6d85; 
    margin: 0 auto 0 auto; 
} 

.block .container .content { 
    display: block; 
} 

.button { 
    display: block; 
    margin: auto auto auto auto; 
    width: 120px; 
    height: 50px; 
    background-color: #1b6d85; 
    color: white; 
    line-height: 45px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom: 20px; 
}