具有相同高度的容器的宽度问题答案

【问题标题】：Width issue for containers with the same height具有相同高度的容器的宽度问题
【发布时间】：2016-05-23 06:03:10
【问题描述】：

我的目标是拥有 2 个容器，每个容器的宽度为 50%，如果其中一个容器中的文本量多于另一个容器，那么它们的高度都与具有较长文本的容器相同。你能告诉我为什么我的代码中没有应用 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

【问题讨论】：

标签： html css

【解决方案1】：

替换：

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

与：

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

那么你的宽度会很好用！

【讨论】：

我正在尝试为容器设置边框底部，并且我需要在单元格之间留出一些空间。我添加了一个单元格包装器，但问题是它从底部对齐内容，因此顶部有一个空间，而不是在底部添加空间。我更新了代码笔你有什么解决办法吗？

【解决方案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;
}

【讨论】：

没用。我将您建议的更改应用于代码笔，但仍未应用 50% 的宽度
部分浏览器不支持宽度的calc()函数。我有你的代码在这里是 jsfiddle 链接：jsfiddle.net/o2tautem
我想知道它如何计算宽度：calc(100% - 280px);但不计算宽度：calc(50% - 2rem);

【解决方案3】：

更改了父类的display选择器

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

这是工作的Demo

【讨论】：

编辑了答案。请检查一下。抱歉，我的 Mac 中没有安装 IE11