Question

我的目标是拥有2个容器，每个容器的宽度为50％，如果其中一个容器中的文本数量多于另一个容器，则两者的高度与文本较长的容器相同。你能否告诉我为什么我的代码中没有应用50％的宽度？

的CSS： .wrapper容器{ 填充：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

为您编辑代码：

.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 2

替换：

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

使用：

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

然后你的宽度会很好！

Answer 3

更改了父类的display选择器

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

这是工作Demo

高度相同的容器的宽度问题

3 个答案: