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在另一列下面，就好像没有浮动一样。

The demo is here

为什么这不起作用（这不是浮动应该如何工作）？我该怎么做才能解决这个问题？

Answer 1

实现此目的的一种方法是使用此CSS：

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

<强> jsFiddle example

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

流体浮动元件紧邻固定宽度的浮动元件

3 个答案: