1

我想要这个结果：

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>

如何解决？

4

2 回答 2

3

浮动元素width: auto的大小使用收缩匹配算法。也就是说，他们试图根据内容的需要增长。

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

然后，为了使后面的块增长以填充剩余空间，您应该让它具有默认值float: noneand 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>

于 2012-08-16T16:38:27.753 回答
1

为您的元素添加宽度以使其浮动，然后将获得所需的结果。

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

于 2012-08-16T16:32:39.627 回答