我需要两个相邻的 div，所以我不得不将它们放在一个包装器中。我希望通过使用包裹在内部的两个 div 中较高的一个来设置外部 div 的高度。当我对外部 div 使用 height:auto; 时，高度似乎确实描绘了那种质量。但是，两个 div 中较短的一个并没有填满整个高度，并且与另一列的高度不同。有没有人知道任何 CSS 技巧来让它工作？
这个 CSS 如下:
html, body {
background-color: #888888;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped {
width:95%;
border-style: solid;
border-width: 5px;
border-color: black;
overflow: hidden;
color:black;
margin:5px;
height: auto;
}
.post {
width: 50%;
float: left;
overflow:hidden;
}
.bully {
background-color: green;
width: 50%;
float:right;
overflow: hidden;
text-align: center;
}
html如下:
![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
<body>
<div class="wrapped">
<div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
<div class="bully">55.55</div>
</div>
</body>
</html>]
图片
我附上了一个例子的图片。由于其他示例的敏感性，我可以为您提供任何其他示例。提前致谢!
最佳答案
您需要添加额外的 div 以使其看起来高度相同。 HTML:
<div class="wrapped2">
<div class="wrapped1">
<div class="post">Q: WHAT'S GOING ON???
<br/>A: I HAVE NO IDEA!!!</div>
<div class="bully">55.55</div>
</div>
</div>
像这样添加一些CSS:
html, body {
background-color: #fff;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped2{
float:left;
width:100%;
background:green;
position:relative;
right:40%;
overflow:hidden;
position:relative;
}
.wrapped1 {
float:left;
width:100%;
background:red;
position:relative;
right:30%;
}
.post {
height:auto;
float: left;
overflow:hidden;
background:red;
position:relative;
left:70%;
}
.bully {
position:relative;
left:70%;
}
重点是position:relative。
还有 taraa...类似于 this将临近。 希望它对您有用。
关于html - 内部 div 不会填充高度为 :auto 的外部 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27517404/