html - 避免在容器中不增加任何高度的情况下右浮动 DIV 包装

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，因为我不希望工具栏影响框的高度。

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

Answer 1

你可以试试这个，这对我有用。

.title {
   float:left;
}