2 блока разной высоты в одном ряду

401

22 февраля 2017, 20:07

Как сделать, что бы блоки были на одном уровне ( т.к. они на одном уровне по нижней стороне) без задания статической высоты и без флоатов

  body .mid-wrapper .mid-container { 
    width: 100%; 
    text-align: center; } 
    body .mid-wrapper .mid-container .block-container { 
      display: inline-block; 
      text-align: -webkit-center; 
      width: 40%; } 
      body .mid-wrapper .mid-container .block-container .block-img { 
        min-height: 160px; } 
      body .mid-wrapper .mid-container .block-container .block-header { 
        font-weight: bold; 
        padding-bottom: 20px; } 
      body .mid-wrapper .mid-container .block-container .block-text { 
        text-align: left; 
        width: 70%; } 
      body .mid-wrapper .mid-container .block-container .btn-main span { 
        left: 36%; } 
        img{width:100px;height:100px;}

  <div class="mid-wrapper"> 
      <div class="mid-container"> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
      </div> 
    </div>

Answer 1

Например, так:

  body .mid-container { 
display:flex; 
align-items:flex-start; 
width: 100%; 
text-align: center; } 
  body .mid-wrapper .mid-container { 
    width: 100%; 
    text-align: center; } 
    body .mid-wrapper .mid-container .block-container { 
      display: inline-block; 
      text-align: -webkit-center; 
      width: 40%; } 
      body .mid-wrapper .mid-container .block-container .block-img { 
        min-height: 160px; } 
      body .mid-wrapper .mid-container .block-container .block-header { 
        font-weight: bold; 
        padding-bottom: 20px; } 
      body .mid-wrapper .mid-container .block-container .block-text { 
        text-align: left; 
        width: 70%; } 
      body .mid-wrapper .mid-container .block-container .btn-main span { 
        left: 36%; } 
        img{width:100px;height:100px;}

  <div class="mid-wrapper"> 
      <div class="mid-container"> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
      </div> 
    </div>

Answer 2

 body .mid-wrapper .mid-container { 
    width: 100%; 
    display: inline-block;  
    position: relative; 
    text-align: center; } 
    body .mid-wrapper .mid-container .block-container { 
      text-align: -webkit-center; 
      width: 40%; } 
      body .mid-wrapper .mid-container .block-container .block-img { 
        min-height: 160px; } 
      body .mid-wrapper .mid-container .block-container .block-header { 
        font-weight: bold; 
        padding-bottom: 20px; } 
      body .mid-wrapper .mid-container .block-container .block-text { 
        text-align: left; 
        width: 70%; } 
      body .mid-wrapper .mid-container .block-container .btn-main span { 
        left: 36%; } 
        img{width:100px;height:100px;}			    
 body .mid-wrapper .mid-container .block-container:last-child 
        { 
        border:1px solid hsla(0,0%,0%,1); 
        position:absolute; 
        top:0; 
        left:42%; 
        }

			<div class="mid-wrapper"> 
      <div class="mid-container"> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
 
      </div> 
    </div>

Answer 3

body .mid-wrapper .mid-container { 
    width: 100%; 
    display:flex; 
    margin:0 auto;} 
    body .mid-wrapper .mid-container .block-container {  
      border:1px solid hsla(0,0%,50%,1); 
      text-align: -webkit-center; 
      width: 40%; } 
      body .mid-wrapper .mid-container .block-container .block-img { 
        min-height: 160px; } 
      body .mid-wrapper .mid-container .block-container .block-header { 
        font-weight: bold; 
        padding-bottom: 20px; } 
      body .mid-wrapper .mid-container .block-container .block-text { 
        text-align: left; 
        width: 70%; } 
      body .mid-wrapper .mid-container .block-container .btn-main span { 
        left: 36%; } 
        img{width:100px;height:100px;}

<div class="mid-wrapper"> 
      <div class="mid-container"> 
 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
		 
        <div class="block-container"> 
          <div class="block-img"> 
            <img src="http://i.dailymail.co.uk/i/pix/2016/04/13/00/331D901800000578-3536787-image-a-11_1460503122350.jpg" alt=""> 
          </div> 
          <div class="block-header"> 
            text text text  
          </div> 
          <div class="block-text"> 
            text text text text text text text text  
          </div> 
          <div class="btn-link"> 
            <div class="button btn-main"><span> Sign Up</span></div> 
          </div> 
        </div> 
      </div> 
    </div>