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: 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>

于 2012-08-16T16:38:27.753 に答える
1

要素に幅を追加してフロートできるようにすると、必要な結果が得られます。

デモ： http： //jsfiddle.net/q8SfB/1

于 2012-08-16T16:32:39.627 に答える