Question

我有3个浮动<div>，它们被包装器包围。

我遇到的问题是3个div的长度必须相同，但是因为它们有响应，所以它们不能固定高度。

我在stackoverflow上搜索并找到了这篇文章：Make floating divs the same height

我尝试了这个，但无法让它发挥作用。

我创建了一个小提琴，其中中间列的文本最多，所以其他两个也应该匹配此高度。

＆＃13;

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
}
#iconWrapper {
  display: table;
  margin-top: 50px;
  height: 500px;
}
.icon {
  float: left;
  width: 33.3%;
  text-align: center;
}
.explanation {
  text-align: left;
  width: 90%;
  min-height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}
.boxOrange {
  border: 2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
  border: 2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
  border: 2px solid RGBa(137, 176, 185, .4);
}

＆＃13;

<div id="iconWrapper">
  <div class="icon">
    <img src="img/icon3.png" />
    <div class="explanation boxGreen">
      <h2 class="green">IT Support</h2>

      <p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">
    <img src="img/icon1.png" />
    <div class="explanation boxOrange">
      <h2 class="orange">Communications</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">
    <img src="img/icon2.png" />
    <div class="explanation boxBeige">
      <h2 class="beige">Cloud Solutions</h2>

      <p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
</div>

＆＃13;

JS FIDDLE： http://jsfiddle.net/Qv8ak/

Answer 1

您的.icon类向左浮动导致问题 - 然后您需要添加： “display：table-cell;”你的.explanation课程。

祝你好运！

与你的小提琴混淆：http://jsfiddle.net/Qv8ak/10/

.explanation {
    display: table-cell;
}

对不起的答案 - 我很新！

编辑：更新了小提琴链接，以解决评论部分中描述的问题。

更多信息：http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

Answer 2

在display:table-cell;班级上使用.icon，在height:100%上使用.explanation

jsFiddle

.icon {
    display:table-cell;
    height: 100%;  /* Firefox Fix as per tsHunter */
    width:33.3%;
    text-align:center;
}
.explanation {
    text-align:left;
    width:90%;
    height: 100%;
    margin: 0 auto;
    margin-top:40px;
    border-radius:10px;
    padding:20px;
    margin:20px;
}

Answer 3

您需要将display: table-cell添加到.icon，将height:100%添加到.icon和.explanation。

jsFiddle

Answer 4

如果有人越过这个问题，如果古老的浏览器支持不是问题，你可以使用css3 flexible box获得相等的高度列。

您所要做的就是将display:flex应用于父元素：

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
}
#iconWrapper {
  display: flex;
  margin-top: 50px;
}
.icon {
  display: flex;
  width: 33.3%;
  text-align: center;
}
.icon::after {
  clear: both;
}
.explanation {
  text-align: left;
  width: 90%;
  min-height: 200px;
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
}
.boxOrange {
  border: 2px solid RGBa(213, 99, 42, .4);
}
.boxBeige {
  border: 2px solid RGBa(211, 200, 175, .4);
}
.boxGreen {
  border: 2px solid RGBa(137, 176, 185, .4);
}

<div id="iconWrapper">
  <div class="icon">

    <div class="explanation boxGreen">
      <img src="img/icon3.png" />
      <h2 class="green">IT Support</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">

    <div class="explanation boxOrange">
      <img src="img/icon1.png" />
      <h2 class="orange">Communications</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
  <div class="icon">

    <div class="explanation boxBeige">
      <img src="img/icon2.png" />
      <h2 class="beige">Cloud Solutions</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper dictum rutrum. Donec at dolor gravida, egestas magna non, egestas sem. Sed id massa ac lacus faucibus gravida sed nec nulla. Nam enim nisl.</p>
    </div>
  </div>
</div>

JSFiddle

旁注：在这个特定问题的情况下，为了实现相同的布局，需要稍微改变标记。正如我之前提到的，我将其留待将来参考，因为flex是布局的新方式，而不是float。现在是时候开始使用float来实现它的实际意义了：）

使用css等于高度div

4 个答案: