12

このスニペットは私が欲しいものを示しています: http://jsfiddle.net/945Df/3/

<div class="sup" id="pr">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span></strong>
</div>
<div class="sup">
    <strong>
        <a href="#">Rosario, Santa Fe, Argentina.</a> <span class="date">17 de septiembre de 2013.</span>
    </strong>
</div>

スペースがなくなったときにdivの幅(プロジェクトではビューポート)のときに、スパンを新しい行にドロップしたい。

説明が悪くてすみません。やり方がわかりません。ありがとう！

編集: 2 番目の例では、「SEPTIEMBRE DE 2013」というフレーズ。新しい行にドロップします。しかし、「17 DE」というフレーズはまだ上の行にあります。「2013年9月17日」が欲しい。新しい行にドロップします。とった？

4

6 に答える 6

35

スパンを新しい行に折り返さずに、他のテキストの下に完全に移動したい場合は、次を使用できますwhite-space: nowrap;

.date {
    text-transform: uppercase;
    color:#848484;
    white-space:nowrap;
}

デモ

于 2013-01-22T18:48:09.170 に答える
15

十分なスペースがない場合にスパンを次の行に移動するには、次のように設定できます。display: inline-block;

.date {
    display: inline-block;
    ...
}

これを確認してください：http://jsfiddle.net/945Df/7/

于 2013-01-22T18:49:45.213 に答える
4 
.date{display:inline-block;}

日付がdivより長い場合は改行して表示

例: http://jsfiddle.net/TqRyK/

于 2013-01-22T18:53:53.830 に答える
1 
.date {
    white-space: nowrap;
}

http://jsfiddle.net/945Df/6/

于 2013-01-22T18:49:24.547 に答える
1

あなたが浮く場合：右; 全体を入れる余地がなくなったら、次の行に移動する必要があります。

後でクリア要素が必要になります。

于 2013-01-22T18:49:54.600 に答える