css - 固定宽度浮动元素旁边的流体浮动元素

Question

这是我的简单标记：

<div class="row">
  <div class="col fixed">Short text</div>
  <div class="col fluid">Longer text....</div>
</div>

这是我的 CSS：

.row {
    padding: 20px;
}
.row:after {
    content: "";
    display: block;
    clear: both;
}

.col {
    float: left;
}
.col.fixed {
    width: 200px;
}

我认为流畅的文本会出现在固定列旁边（在其右侧），然后会折回。这不是实际发生的情况。相反，整个.col.fluid下降到另一列下，好像没有浮动。

演示在这里。

为什么这不起作用（这不是花车应该如何工作的）？我能做些什么来解决这个问题？

Answer 1

一种方法是使用这个 CSS：

.row {
    background: rgba(0, 128, 0, .2);
    padding: 20px;
    display:table;
}
.col {
    display:table-cell;
}
.col.fixed {
    width: 200px;
}

jsFiddle 示例

Answer 2

要获得您想要的效果，您需要将浮动固定框放置在流畅的块级 div 中。

请参阅以下内容：http: //jsfiddle.net/audetwebdesign/7cMQg/6/

<div class="row">
<div class="col fluid">
    <div class="col fixed">Short text: to see the full effect,
    type in a bit more text so that you can get a few lines
    in the floated-fixed-width box.</div>
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry...
</div>
</div>

如果您检查 CSS，我在浮动 div 中添加了一个右边距，并更改了背景颜色以突出显示定位。

Answer 3

如果您想要类似于第一个字母大于文本其余部分的效果（在许多书籍和著作中都可以找到），请尝试以下操作：

<div>
   <span class="fixed">Short text</span>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

CSS

.fixed {
    width: 200px;
    display:inline-block;
}

jsFiddle