0

私はこのデザインを持っています：

デザイン

現時点では、すべてが暗い背景のこの長方形にラップされています。画像と各テキスト文字列は、独自のクラスにあります。テキストはスパンで、最後に改行があります。

私の問題は、次のように、3 つのテキスト文字列を画像の右側に表示することです。

ここに画像の説明を入力

単純なことだと思いますが、何らかの理由でこれに対する解決策を思いつくことができません。

ここで説明するマークアップはあまりありませんが、とにかく貼り付けます。

<div class="wrapper">
    <div class="pic"><img src="img.png" width="164" height="128"></div>
    <span class="username">petronella</span></br>
    <span class="info">Kvinna, 22 år, Uppsälje</span></br>
    <span class="desc"><em>Hej!!Jag heter Petronella~~~</em></span>
</div>

.wrapper {
    position: relative;
    float: left;
    width: 420px;
    padding: 15px;
}
.pic {
    position: relative;
    width: 164px;
    height: 128px;
}
.username {
    position: relative;
}
.info {
    position: relative;
    font-weight: bold;
}
.desc {
    position: relative;
}

どんな助けでも大歓迎です、ありがとう。

4

4 に答える 4

2

.spotlight-pic左に浮かせてみてください:

<div class="wrapper">
    <div class="spotlight-pic"><img src="img.png" width="164" height="128"></div>
    <span class="username">petronella</span></br>
    <span class="info">Kvinna, 22 år, Uppsälje</span></br>
    <span class="desc"><em>Hej!!Jag heter Petronella~~~</em></span>
</div>

.wrapper {
    position: relative;
    float: left;
    width: 420px;
    padding: 15px;
}
.spotlight-pic {
    position: relative;
    width: 164px;
    height: 128px;
}
.username {
    position: relative;
}
.info {
    position: relative;
    font-weight: bold;
}
.desc {
    position: relative;
}
.spotlight-pic {
    float: left;
    margin-right: 15px;
}
于 2012-08-05T01:37:06.607 に答える
1

この jsFiddleをチェックしてください。コンテンツの他のブロック (画像の外側) を でラップする場合はdiv、次のスタイルが必要です。

.wrapper > div { float: left; }
于 2012-08-05T01:38:39.393 に答える
1

img div を span タグの左にフロートさせるには、次の css を追加します。

.spotlight-pic {
    float: left;
}
于 2012-08-05T01:38:54.467 に答える
1

画像を左に浮かせます。

補足として、これらのテキスト行を、たとえばユーザー名と残りの部分ではなく、span要素 (およびs を分離する)に入れるのは非常に奇妙です。brh2p

それがどのように見えるかを見てください。

于 2012-08-05T01:35:46.007 に答える