2

我试图将 2 个 div 放在一行中，但是当我设法做到这一点时 - 主容器的高度未正确调整：

<div class="container">
    <div class="info">Text</div>
    <div class="controls">
        <button value="Accept">Accept</button>
        <button value="Decline">Decline</button>
    </div>
</div>

CSS：

.container{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:1px solid #800000;

margin: 8px;
height:auto;
}

.info{
display: inline-block;
vertical-align: middle;
text-align: center;
}

.controls{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 130px;
padding: 8px;
border-left: 1px solid #000;
background-color: #D4D0C8;
float: right;
}

button{
width:100%; // what ever you want it to be
}

jsfiddle

如何固定容器高度？

4

3 回答 3

1

这是基于浮动的布局的一个常见问题：容器不会拉伸以适应其浮动子项的高度。这个问题有两个简单的解决方案：

  • 添加一个 div clear:both（正如 AliRiza 在另一个答案中推荐的那样）。
  • 添加overflow:auto到容器中。

我提倡使用后一种方法，因为它不涉及仅仅为了演示而添加 HTML 元素。在这里查看更多信息。

它可以这样实现：

.container {
    overflow:auto;
}

JS 小提琴示例

于 2013-02-17T17:27:33.210 回答
0

<div style="clear:both;"></div>在容器 div 末尾添加

<div class="container">
    <div class="info">Text</div>
    <div class="controls">
        <button value="Accept">Accept</button>
        <button value="Decline">Decline</button>
    </div>
    <div style="clear:both;"></div>
</div>

编辑DEMO

于 2013-02-17T17:24:45.277 回答
0

css

<style>
div{
width:100px;
height:100px;
display:inline-block;
border:1px solid #ccc;
vertical-align:top;
}
</style>

html

<div>your div 1</div>
<div>Your div 2</div>

垂直对齐是为了让它保持在顶部，如果你添加不同数量的文本和图像，因为它下降了哈哈

于 2013-02-17T19:47:07.353 回答