Question

我想要这个结果：

LEFT THING, not fixed    here comes a text, which is 100% widthed in this "column"
width (content itself    but my problem is, when its too long, this column goes under the
determines that)         left column, so not left floated. I also want this text go and
                         go under and under, but normally, THIS LINE would continue under
                         the left column, which I dont want to. Its like table element
                         but its still considered bad for this situations :/

DIV结构：

<div style="float: left">LEFT THING</div>
<div style="float: left">here comes a text, which...</div>

如何解决？

Answer 1

使用shrink-to-fit algorithm调整width: auto的浮动元素的大小。也就是说，他们试图像他们的内容一样增长。

为避免这种情况，您应该限制宽度，例如通过设置显式width或上限max-width。

然后，要使以下块增长以填充剩余空间，您应该让它具有默认float: none和width: auto，并建立块格式上下文（BFC）以防止它重叠漂浮。

.wrapper, .main {
  overflow: hidden; /* Establish Block Formatting Context */
}
.left {
  float: left;
  max-width: 30%; /* Prevent it from growing too wide */
}

<div class="wrapper">
  <div class="left">...</div>
  <div class="main">...</div>
</div>

.wrapper, .main{
  overflow: hidden; /* Establish Block Formatting Context */
  text-align: justify;
}
.left {
  float: left;
  max-width: 30%; /* Prevent it from growing too wide */
  border: 1px solid blue;
}
.main {
  border: 1px solid red;
}

<div class="wrapper">
  <div class="left">LEFT THING LEFT THING LEFT THING LEFT THING</div>
  <div class="main">here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which... here comes a text, which...</div>
</div>

Answer 2

为元素添加宽度以便能够浮动它们，然后将获得所需的结果。

演示： http://jsfiddle.net/q8SfB/1

向左浮动：长篇文章使它崩溃

2 个答案: