Html 向左浮动：长文本使其崩溃

我想要这个结果：

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 style="float: left">LEFT THING</div>
<div style="float: left">here comes a text, which...</div>

左边的东西
下面是一段文字，它。。。

---

如何解决此问题？

为元素添加宽度，使其能够浮动，然后将得到所需的结果

---

演示：为元素添加宽度，使其能够浮动，然后将获得所需的结果

---

演示：

带有

宽度：auto

的浮动元素使用。也就是说，他们试图根据自己的内容增长多少

为了避免这种情况，您应该限制宽度，例如通过设置显式的

宽度

或使用

最大宽度

设置上限

然后，要使下面的块增长以填充剩余空间，您应该让它具有默认的

浮点：无

和

宽度：自动

，并建立块格式上下文（BFC），以防止它与浮点重叠

.wrapper.main{
溢出：隐藏；/*建立块格式上下文*/
}
.左{
浮动：左；
最大宽度：30%；/*防止其过宽*/
}

...
...

.wrapper.main{
溢出：隐藏；/*建立块格式上下文*/
文本对齐：对齐；
}
.左{
浮动：左；
最大宽度：30%；/*防止其过宽*/
边框：1px纯蓝色；
}
梅因先生{
边框：1px纯红；
}

左边的东西左边的东西左边的东西左边的东西左边的东西
下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。

带有

宽度：auto

的浮动元素使用。也就是说，他们试图根据自己的内容增长多少

为了避免这种情况，您应该限制宽度，例如通过设置显式的

宽度

或使用

最大宽度

设置上限

然后，要使下面的块增长以填充剩余空间，您应该让它具有默认的

浮点：无

和

宽度：自动

，并建立块格式上下文（BFC），以防止它与浮点重叠

.wrapper.main{
溢出：隐藏；/*建立块格式上下文*/
}
.左{
浮动：左；
最大宽度：30%；/*防止其过宽*/
}

...
...

.wrapper.main{
溢出：隐藏；/*建立块格式上下文*/
文本对齐：对齐；
}
.左{
浮动：左；
最大宽度：30%；/*防止其过宽*/
边框：1px纯蓝色；
}
梅因先生{
边框：1px纯红；
}

左边的东西左边的东西左边的东西左边的东西左边的东西
下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。下面是一段文字，它。。。

他不想固定任何一列的宽度。@adu你不能浮动没有已知宽度的元素。他不想固定任何一列的宽度。@adu你不能浮动没有已知宽度的元素。