1

その画像の右側にテキストを含む画像を表示したい。これはすべて 1 行で、いくつかのテキスト内にある必要があります。残りのテキストが画像の周りに流れないようにします。

例：

いくつかのテキスト... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labe et dolore magna aliquyam erat, sed diam voluptua.

私の画像とテキスト

もう少しテキスト... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labe et dolore magna aliquyam erat, sed diam voluptua.

画像の後のテキストが周りに流れないようにします。画像を左に揃える float:left を試しましたが、その横にテキストだけが表示されると言う方法がわかりません。

何か助けはありますか？

ありがとう！

4

2 に答える 2

1

CSS

p { line-height:1.5; outline:1px dashed green }

.left-img span { /* span would be `img` in your project */
    float:left;
    margin-right:1em;
    /* BEG not needed for image */
    background-color:gray;
    width:20px;
    height:200px;
    outline:1px dotted;
     /* END not needed for image */
}

.left-img + p { clear:left; }
​

HTML

<p>Lorem ipsum ....</p>
<p class="left-img"><span></span>More text</p>
<!-- Replace <span></span> with <img>
---- working code would be:
---- <p class="left-img"><img src="...">More text</p>
-->
<p>Lorem ipsum ....</p>
​

マークアップのセマンティクスを確認し、自然なドキュメントフローを活用してください。上記のCSSの最後の行が重要です：「<p>次のleft-imgクラスは通常のドキュメントフローに戻る必要があります。」

フィドル： http： //jsfiddle.net/MP8GJ/1/

于 2012-12-18T15:40:56.543 に答える
1

これを行う1つの方法は次のとおりです。http://jsfiddle.net/2BJ7J/

基本的に、コンテナを使用して画像とテキストを左側に浮かせています。

.container {
    width:480px;
    padding:20px;
    border:1px solid #ccc;
    overflow:auto;
}
.container img {
    float:left;
    width:260px;
    margin:0 20px 0 0;
}
.container .text {
    float:left;
    width:200px;
}



<div class="container">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" />
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis, lorem eget pulvinar faucibus, diam tortor dapibus sapien, a egestas massa arcu ac risus. Ut tempor condimentum tincidunt. Donec vehicula, dui ornare ornare mollis, arcu nibh interdum ipsum, eu condimentum enim nunc id enim
    </div>
</div>
于 2012-12-18T15:26:03.590 に答える