两个div并排，没有硬编码宽度

Question

我看了几个关于此的其他问题，但找不到与我的情况完全匹配的问题。这是我正在尝试的小提琴手：

HTML：

<div class="wrapper">
    <div class="price">ABCDEF</div>
    <div class="text">
        Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.
        Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.
    </div>
</div>

CSS：

.wrapper {
    color: white;
}

.text {
    background: red;
}

.price {
    float: right;
    background: blue;
}

https://jsfiddle.net/p1q3xy00/

我需要在蓝色div的左边缘处制作红色div，并且在蓝色div下方没有任何来自红色div的文本。我也无法明确指定蓝色div的宽度，它应该由其内容决定。可能吗？

Answer 1

只需更改为：

.text {
  background: red;
  display:table-cell;
}

Here's a fiddle

这允许它作为表格单元格运行，因此不会与任何其他div重叠