Question

我需要彼此相邻的两个div，所以我不得不将它们放在一个包装器中。我希望通过使用包裹在内部的两个div中较高的div来设置外部div的高度。当我使用height:auto;作为外部div时，高度确实似乎描绘了这种质量。但是，两个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>]

图片

enter image description here

我附上了一个这样的例子。由于其他示例的敏感性，我可以为您提供任何其他示例。提前谢谢！

Answer 1

你需要的是添加额外的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这样的东西即将到来。希望它对你有用。

内部div不会用高度填充外部div：auto

1 个答案: