0

これが私の簡単なマークアップです：

<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代わりに、フロートがないかのように、全体が他の列の下に落ちます。

デモはこちら.

なぜこれが機能しないのですか (フロートが機能するはずの方法ではありません)。これを修正するにはどうすればよいですか？

4

3 に答える 3

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に右マージンを追加し、背景色を変更して位置を強調しました。

于 2013-03-11T21:15:57.757 に答える
2

これを行う 1 つの方法は、次の CSS を使用することです。

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

jsFiddle の例

于 2013-03-11T21:10:48.083 に答える
0

最初の文字がテキストの残りの部分よりも大きくなるような効果が必要な場合 (多くの本や文章で見られる)、これを試してください:

<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;
}

jsフィドル

于 2013-03-11T21:19:35.247 に答える