请帮助 Java 人员解决一个简单的 CSS 问题。试了好几个小时都没找到解决问题的合适方法:如何在使用 float 时拉伸(stretch)子元素的背景颜色，使其与父元素具有相同的高度？我敢打赌它与 display:flex 有关，但我无法让它工作 :-/
这是代码:https://jsfiddle.net/bycor29w/
目标:无论包含多少文本，右边栏的背景色都必须填充到与中间栏相同的高度
要求:必须使用float
StackOverflow 要求:“指向 jsfiddle.net 的链接必须附有代码”，所以给你:
<!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>
最佳答案
首先，Flexbox 会覆盖 float ...如果你想使用 float ...不要使用 flexbox。
您似乎想要的可以使用 CSS 表格来实现....如果绝对必要，您仍然可以使用 float 。
* {
-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;
}<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>关于css - 如何在使用float时拉伸(stretch)子元素的背景颜色，使其与父元素具有相同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34623054/