Question

我一直在努力让一些div达到相同的高度。

这是我的JSfiddle：

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

我尝试在父级display: table;或display: table-cell;中使用display: table-column;，因为您可以在小提琴中看到，但它并不能使div等于高度。

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

如何让这些CSS表格在这里工作，或者我在咆哮错误的树？

感谢您提供的任何帮助。

*编辑：我还要注意，我只希望连续的列高度相等，但只有当它们并排时。当屏幕是＆lt; 800px列堆叠，然后它们是内容高度。

Answer 1

您必须重新构建显示表。您不能将边距或浮点数与显示表一起使用，因为这会破坏表格的用途。

另外，我离开了@media的东西，因为我没有时间去做那件事我为此道歉。我希望这可以让你开始。

注意：如果表格单元格为空，则使用我提供的代码，它将全部抛弃。但是，它会接受 来更正它。

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
  padding: 20px;
  border-collapse: separate;
  border-spacing: 50px;
}
.row {
  width: 100%;
  display: table-row;
}
.cell-wrapper {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px 0px;
  width: 33%;
  display: table-cell;
}
.cell-padding {
  height: 100%;
}
.cell-content {
  background-color: rgb(225, 221, 213);
  border: 10px solid #fff;
  padding: 20px;
  height: 100%;
}

<div class="wrapper">
  <div class="row">
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          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="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          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="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          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="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          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="cell-wrapper">
      <div class="cell-padding">
        <div class="cell-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

你可以使用弹性盒子。我改变你的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 */

Answer 3

因为你没有使用flex。您必须将table-cell的容器设置为display:table-row;。

如果您没有为width指定table-cell，那么它们可以是不等width以最小化高度，但如果您不想要，则只需添加{ {1}}给他们。

见这个例子：

width

.container{
  width:100%;
  margin:0;
  padding:0;
  display:table;
}
.row{
  width:100%;
  margin:0;
  padding:0;
  display:table-row;
}
.inside{
  display:table-cell;
  padding:20px;
  box-sizing:border-box;
  border:1px solid;
}

响应/等于div高度

3 个答案: