高度相同的容器的宽度

我的目标是每个容器有两个容器，每个容器宽度为50％，如果其中一个容器的文本数量多于另一个容器的容器容量，那么它们的容器高度与容器容量相同。你能告诉我为什么50％的宽度不适用于我的代码？高度相同的容器的宽度

css： .wrapper-container { padding：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

来源

2016-05-23 Negin Basiri

替换：

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

有了：

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

那么你的宽度将工作好！

来源

2016-05-23 06:37:25

谢谢，这也是在IE工作 –

我想有一个边界底部的容器，也需要一些空间之间的单元格。我添加了一个cell-wrapper，但问题在于它将底部的内容对齐，所以顶部有一个空格，而不是在底部添加空格。我更新了代码笔你有任何解决方案吗？ –

编辑的代码为您提供：

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

来源

2016-05-23 06:07:11

没有工作。我将你建议的改变应用到代码笔中，仍然不应用50％宽度 –

某些浏览器不支持calc（）函数的宽度。我有你的代码在这里是jsfiddle链接：https：//jsfiddle.net/o2tautem/ –

我想知道它如何可以计算宽度：calc（100％-280px）;但不计算宽度：calc（50％ - 2rem）; –

改变了display选择父类的

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

这里是工作Demo

来源

2016-05-23 06:44:10

它不工作在IE 11 :( –

编辑答案。请检查它。对不起，我没有在我的Mac –

安装IE11仍然无法在IE –

高度相同的容器的宽度

回答

相关问题