1

次のように、ホルダー内に配置したいテキストがあります。

[...........]
[.the]......]
[.[title]...]
[...........]

ホルダーの背景は黒である必要があります。テキストの背景を白、テキストを黒にします。私は次の構造を使用しています：

<div class="holder">
    <div class="title">
        <span>The</span>
        <span>Title</span>
    </div>
</div>

正しいかどうかはわかりませんが、pがホルダーの全幅になっているのに対し、スパンの幅はテキスト自体に合わせているため、<span>sオーバーを使用しています。<p>s

私は新しいラインの各スパンが欲しいです、そしてこれはそれがatmを壊しているところです。現在、スパンは同じ線上にあります。最初のスパンの後にを追加しようとしました<br>が、それでも修正されません。今回は、2番目のスパンが少し下にありますが、右側に配置されています。

私が使用しているCSS：

.holder {
    width: 200px;
    height: 300px;
}

.title span {
    background: #fff;
    color: #000;
    float: left;
    display: block;
    padding: 2px;
}
4

5 に答える 5

2

そのためにフロートを使用しないでください。さらに、行の途中でテキストをスパンするためにスパンが作成されました。

それはあなたがやろうとしていたことですか: http://jsfiddle.net/Rhjtv/ ?

于 2012-09-08T11:11:53.047 に答える
1

clear:both;スパンのスタイル宣言に追加してみてください。

これで問題が解決しない場合は、http： //www.jsfiddle.netで例を作成して、 wieが問題をよりよく理解できるようにしてください。

于 2012-09-08T11:08:02.323 に答える
1

ラインを次々に配置したい場合は、divを使用する必要があります

于 2012-09-08T11:13:07.900 に答える
0

float：leftを削除してみてください。から

.title span {
    background: #fff;
    color: #000;
    float: left;
    display: block;
    padding: 2px;
}
于 2012-09-08T11:14:59.177 に答える
-1

css word-break を使用して行を区切る

ここをクリックして結果を表示 http://gucoders.com/css3/css_wordbreak.php

于 2014-12-10T05:14:15.863 に答える