Question

我试图让工具栏始终在DIV内对齐，而不添加任何高度。我发现的问题是，当盒子的宽度为100％，宽度由内容决定时，这个问题都可以解决。 HTML看起来与此类似：

<div class="box">
    <div class="title">
        float right
    </div>
    <div class="toolbar">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
    </div>
</div>

我设法让它在Firefox中运行，但Chrome在没有足够空间的情况下包装工具栏，而不是增加容器的宽度。

.box {
    border: 1px solid #ccc;
    display: inline-block;
    margin: 5px 0 15px;
}
.title {
    display: inline-block;
}
.toolbar {
    background: #eee;
    float: right;
    margin-left: 25px;
}

我想找到一套规则来实现这一点，无论容器的宽度如何，但除非我使用一些额外的类来区分这两种情况，否则我没有想法。另外，我试图避免使用overflow或clearfix，因为我不希望工具栏影响框的高度。

在这个小提琴中，我展示了我尝试过的所有组合：http://jsfiddle.net/omegak/c4y4t/2/

Answer 1

你可以尝试一下，这对我有用。

.title {
   float:left;
}

Answer 2

查看这是否是所需的output

更新了以下css并将clearfix类添加到父div

.title {
  float:left;
}

Answer 3

添加以下CSS并清除第一个Div上的浮动。

.title {
   float:left;
}

Here is the demo

Answer 4

我最终以一点点黑客的方式工作了。

我放弃了尝试不是float: left的标题。然后，为了防止盒子没有高度我向它添加了overflow: hidden。最后，黑客攻击包括在工具栏上设置margin-bottom: -999px以防止它在框中添加任何额外的高度。

以下是解决方案：http://jsfiddle.net/c4y4t/8/

避免右浮动DIV包装而不在容器中添加任何高度

4 个答案: