同じ高さのコンテナの幅の問題

Question

私の目標は、それぞれ50％幅の2つのコンテナを持つことです。一方のコンテナのサイズが他のコンテナのサイズよりも大きい場合、両方とも長いテキストのコンテナと同じ高さになります。自分のコードに50％の幅が適用されない理由を教えてください。

css： 。ラッパーコンテナ{ パディング：32px; }

.display__table { 
    width: 100%; 
    display: table; 
} 

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

.themeTile{ 
    display: table-cell; 
    position: relative; 
    float: none; 
    border-bottom: 1px solid gray; 
    width: calc(50% - 2rem); 
} 

.themeTile:nth-child(odd){ 
    padding-right: 2rem; 
} 


.themeTextContainerWide{ 
    width: calc(100% - 90px); 
float: left; 
} 

.themeTextContainer{ 
    width: calc(100% - 280px); 
    float: left; 
} 

.theme-image-container{ 
    width: 280px; 
    float: left; 
position: relative; 
} 

HTML：あなたのための

<div class="wrapper-container"> 

<div class="display__table"> 
<div class="display-table__row"> 
    <div class="themeTile"> 
    <h3>Digital Infrastructure</h3> 

    <div> 
     <img src="http://placehold.it/90x90"> 

     <div class="themeTextContainerWide"> 
     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
      percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. 
     </p> 
     <a> 
      Call to Action 
     </a> 
     </div> 

    </div> 
    <div> 

     <div class="theme-image-container"> 
     <picture> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 769px)"> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 641px)"> 
      <source srcset="http://placehold.it/320x290" media="(min-width: 320px)"> 
      <img class="position-float__left" srcset="http://placehold.it/320x290"> 
     </picture> 

     </div> 

     <div class="themeTextContainer"> 
     <p>Case Study</p> 
     <h5>title</h5> 

     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
     </p> 
     <a> 
      Call to action 
     </a> 
     <span>(PDF 10,00 MB)</span> 
     </div> 
    </div> 

    </div> 
    <div class="themeTile"> 
    <h3>Digital Infrastructure</h3> 

    <div> 
     <img src="http://placehold.it/90x90"> 

     <div class="themeTextContainerWide"> 
     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
      percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. 
     </p> 
     <a> 
      Call to Action 
     </a> 
     </div> 

    </div> 
    <div> 

     <div class="theme-image-container"> 
     <picture> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 769px)"> 
      <source srcset="http://placehold.it/280x170" media="(min-width: 641px)"> 
      <source srcset="http://placehold.it/320x290" media="(min-width: 320px)"> 
      <img srcset="http://placehold.it/320x290"> 
     </picture> 

     </div> 

     <div class="themeTextContainer"> 
     <p>Case Study</p> 
     <h5>title</h5> 

     <p> 
      Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.    Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
     </p> 
     <a> 
      Call to action 
     </a> 
     <span>(PDF 10,00 MB)</span> 
     </div> 
    </div> 

    </div> 
</div> 

http://codepen.io/neginbasiri/pen/qZergG

Answer 1

は交換してください：

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

で：

.display-table__row { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

次に、あなたの幅が良い動作します！

Answer 2

編集コード：

.wrapper-container{ 
    padding: 32px; 
} 

.display__table { 
    width: 100%; 
    display: table; 
} 

.display-table__row{ 
    display: flex; 
    //margin:0 -0.9375rem; 
} 

.themeTile{ 
    display: table-cell; 
    position: relative; 
    float: none; 
    border-bottom: 1px solid gray; 
    width: calc(50% - 2rem); 
// width:50%; 
    // padding-left: 0.9375rem; 
// padding-right: 0.9375rem; 
} 

.themeTile:nth-child(odd){ 
    //padding-right: 2rem; 
} 


.themeTextContainerWide{ 
    width: calc(100% - 90px); 
    float: left; 
} 

.themeTextContainer{ 
    width: calc(100% - 280px); 
    float: left; 
} 

.theme-image-container{ 
    width: 280px; 
    float: left; 
    position: relative; 
} 

Answer 3

は、ここで親クラスのdisplayセレクタ

.display-table__row{ 
display: -ms-flexbox; 
display: -webkit-flex; 
} 

を変更作業Demo