html - 自适应/等于div高度

我整夜都在努力使一些div高度相等。

这是我的JSfiddle：

https://jsfiddle.net/4cj5LbLs/15/

我试过在父级中使用display: table;并在子级中使用display: table-cell;，如您在小提琴中看到的那样，但这并不能使div的高度相等。

我确实看到了使用flex的方法，但是他们说它与IE9及更低版本不兼容，我希望尽可能地兼容。

我怎样才能使这些CSS表在这里工作，或者我正在树错树皮？

感谢您的任何帮助，您可以提供。

*编辑：我还想指出，我只希望一行中的列相等高度，但仅当它们并排时才行。当屏幕小于800px时，列将堆叠起来，然后是内容的高度。

最佳答案

您可以为此使用弹性盒。我改变你的HTML，它看起来像这样

的HTML

    <div class="row">
    <div class="full-width-container">
        <div class="full-width-wrapper">
            <div class="full-width">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="three-columns-container three-columns-first">
        <div class="column-wrapper">
            <div class="three-columns">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
    <div class="three-columns-container three-columns-second">
        <div class="column-wrapper">
            <div class="three-columns">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            </div>
        </div>
    </div>
    <div class="three-columns-container three-columns-third">
        <div class="column-wrapper">
            <div class="three-columns">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="full-width-container">
        <div class="full-width-wrapper">
            <div class="full-width">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="two-columns-container two-columns-first">
        <div class="column-wrapper">
            <div class="two-columns">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            </div>
        </div>
    </div>
    <div class="two-columns-container two-columns-second">
        <div class="column-wrapper">
            <div class="two-columns">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="sixty-container">
        <div class="column-wrapper">
            <div class="sixty-forty">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            </div>
        </div>
    </div>
    <div class="forty-container">
        <div class="column-wrapper">
            <div class="sixty-forty">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            </div>
        </div>
    </div>
</div>

的CSS

/* Columns */

.row {
  padding: 20px;
  display: flex;
  width: 100%;
}

.row div {
  /* min-height: 200px; */
}
.three-columns {
  height: 100%;
}
/* Full width column */

.full-width-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  width: 100%;
}

.full-width-wrapper {
  background-color: rgb(255, 255, 255);
  padding: 10px;
}

.full-width {
  background-color: rgb(225, 221, 213);
  padding: 20px;
  height: auto;
}

/* Three columns */

.three-columns-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  float: left;
  width:30.6666%;
  display: table-cell;
}

.three-columns-first, .three-columns-second {;
  margin-right: 4%;
}

.three-columns-third {
  margin-bottom: 0px;
}

.three-columns {
  background-color: rgb(225, 221, 213);
  padding: 20px;
  height: auto;
}

/* Two columns */

.two-columns-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  float: left;
  width: 48%;
  display: table-cell;
}

.two-columns-first {;
  margin-right: 4%;
}

.two-columns {
  background-color: rgb(225, 221, 213);
  padding: 20px;
  height: auto;
}

.column-wrapper {
  background-color: rgb(255, 255, 255);
  height: 100%;
  display: flex;
}

.two-columns-container p, .full-width-container p, .two-columns-container p, .column-wrapper p {
  margin-bottom: 0px;
}

/* Two columns (60/40) */

.sixty-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  float: left;
  width: 57.6%;
  margin-right: 4%;
}

.forty-container {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  float: left;
  width: 38.4%;
}

.sixty-forty {
  background-color: rgb(225, 221, 213);
  padding: 20px;
  height: auto;
}

.three-columns-second, .three-columns-third {;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .three-columns-first {
    width: 100%;
    margin-bottom: 30px;
  }
  .three-columns-second {
    width: 100%;
    margin-bottom: 30px;
  }
  .three-columns-third {
    width: 100%;
  }
  .sixty-container {
    width: 100%;
    margin-bottom: 30px;
  }
  .forty-container {
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .two-columns-first {
    width: 100%;
    margin-bottom: 30px;
  }
  .two-columns-second {
    width: 100%;
  }
}

/* END Columns */

关于html - 自适应/等于div高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41405621/