Question

请帮助一个简单的CSS问题的Java人。已经尝试了几个小时，无法找到问题的正确解决方案：如何在使用float时拉伸子元素的背景颜色，使其与父元素具有相同的高度？我打赌它与display:flex有关，但我无法让它发挥作用： - /

目标：右列背景颜色必须填充到与中间列相同的高度，无论它包含多少文本

要求：必须使用float

StackOverflow要求：＆＃34;链接到jsfiddle.net必须附带代码＆＃34;，所以在这里：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    div {
        border: 1px #000 solid;
    }

    .container {
        height: 100%;
        width:980px;
        float:left;
        display: flex;
    }

    .left {
        width: 200px;
        float: left;
    }

    .mid{
        padding-top: 1px;
        width: 560px;
        float: left;
    }

    .right {
        background: #d8d8d8 repeat-y bottom right;
        padding: 0 20px;
        height:100%;
        align-self: center;
        flex: 1;
        width: 180px;
        float: left;
    }
</style>

<div class="container">
    <div class="left">
        asdf<br>
        asdf<br>
        asdf<br>
    </div>
    <div class="mid">
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
        asdf<br>
    </div>
    <div class="right">
        asdf
    </div>
</div>

</body>
</html>

Answer 1

首先，Flexbox将覆盖浮动...如果你想使用浮动...不要使用flexbox。

使用CSS表格可以实现您想要的......如果绝对必要，您仍然可以使用浮点数。

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div {
  border: 1px #000 solid;
}
.container {
  width: 580px;
  display: table;
  overflow: auto;
  vertical-align: top;
}
.left {
  width: 100px;
  float: left;
  display: table-cell;
  vertical-align: top;
}
.mid {
  padding-top: 1px;
  width: 370px;
  float: left;
  display: table-cell;
  vertical-align: top;
}
.right {
  background: lightblue;
  width: 100px;
  display: table-cell;
  vertical-align: top;
}

＆＃13;

<body>
  <div class="container">
    <div class="left">
      asdf
      <br>asdf
      <br>asdf
      <br>
    </div>
    <div class="mid">
      asdf
      <br>asdf
      <br>asdf
      <br>asdf
      <br>asdf
      <br>asdf
      <br>
    </div>
    <div class="right">
      asdf
    </div>
  </div>

</body>

＆＃13;

如何在使用float时拉伸子元素的背景颜色，使其与父元素具有相同的高度？

1 个答案: