0

2つのブロック要素があります。最初のものは左に浮かんでいます。正しい要素もブロックであり、その正方形の形状を維持することを期待しています。代わりに、その中のテキストは、左に浮いている要素の下に折り返されています。

.comment-date {
  float: left;
}
<div class="comment-date">07/08 23:08</div>
<div class="comment-body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>

loremipsumのテキストは日付の下に折り返されます。日付の右側に浮かぶブロック形状を維持することを期待しています。どうすればそれを達成できますか？

ここにフィドルがあります：http： //jsfiddle.net/CS2Hs/

4

4 に答える 4

2

ここでの他の解決策に代わるものは、単純に a を に追加するmargin-leftこと.comment-bodyです。設定幅を適用することも役立ちます.comment-date

.comment-date { 
  float: left;     
  font-weight: bold;    
  width: 90px;
}
.comment-body {
  margin-left: 90px;
}

これにより、テキストが.comment-body日付の下に表示されなくなります。

ここにデモがあります：

--- jsFiddle デモ ---

于 2012-08-16T01:52:25.520 に答える
0

私はあなたの問題を理解しようとします。私が理解しているように、あなたは.comment-bodyを右側に、.comment-dateを左側に、ただし同じ行に配置したいと考えています。

私が正しければ、これはうまくいくかもしれません：

.comment-date {
    display: inline-block;
    float: left;
    width: 15%;
    font-weight: bold;
}
.comment-body {
    display: inline-block;
    float: right;
    width: 85%;
}

私はあなたのためだけにJSFiddleを作りました;)

于 2012-08-16T01:45:46.333 に答える
0

jsfiddle は現在ダウンしているようです。これが機能しない場合、または意図したとおりでない場合は申し訳ありませんが、「comment-body」に「overflow:hidden」を追加してみましたか? これにより、テキストが下に折り返されないようにする新しいレイアウト コンテキストが作成されます。これは驚くほど便利だと思います！それが役立つことを願っています!

于 2013-11-12T09:56:22.317 に答える
0

フロート モデルにはボディ ブロックはありません。単純にfloat: leftforも設定し.comment-bodyます。また、いくつかの幅を使用することもできます。参照: http://jsfiddle.net/CS2Hs/3/

于 2012-08-16T01:44:35.793 に答える