1

これは重複している可能性が高いですが、まったく同じものを見つけることができませんでした。テキストが完全に折り返されないように、画像の下のスペースを埋めたいと思います。視覚的には：

私はこれを持っています：

| | /---\ BLAHBLAH
| | |img| 何とか
| | \---/ ああ
| | 何とか
| | 何とか
| | ...

これ欲しい：

| | /---\ BLAHBLAH
| | |img| 何とか
| | \---/ ああ
| | 何とか
| | 何とか
| | ...

私は何をしますか？

4

7 に答える 7

1

あなたは次のように書くことができます：

<img src="bla.png" style="float:left;" />
<div style="overflow:hidden">Some text</div>

これをチェックしてくださいhttp://jsfiddle.net/HhJML/

于 2013-01-22T06:54:01.497 に答える
0

ここでいくつかのCSSプロパティを試してみる必要があるかもしれません。たとえば、

display:inline-block;

画像用。または

float:right;

テキストと

float:left;

画像またはその両方の場合、。画像のパディングボトムを試すこともできます

これを行うためのより厳密な方法は、テーブルを使用して、同じ「tr」の2つの「td」要素に画像とテキストを追加することです。

于 2013-01-22T05:55:17.007 に答える
0

img css floatを左に、textを右にfloatに設定する必要があると思います。

<img src="bla.png" style="float:left;" />
<div style="float:right;"><p>Some text</p></div>

それが役に立てば幸い ：）

于 2013-01-22T05:56:39.660 に答える
0

HTML：

<div class="content">
    <img src="thumbnail.jpg" width="50" height="50" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p>
</div>

CSS：

.content {
    padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
    position: relative; /* So the thumbnail is relative to this */
}

.content img {
    left: 0;
    position: absolute;
    top: 0;
}

CSSのヒント：画像をテキストで折り返すことなく画像をフロートさせる

于 2013-01-22T06:24:04.227 に答える
0

テーブルを使用してもかまわない場合は、問題を簡単に解決できます。

このような：

<table>
    <tr>
        <td><img src="yourImage.jpg" alt="" /></td>
        <td>Your text... blah blah blah..... blah</td>
    </tr>
</table>

すべての td が同じサイズになるように、必要に応じて td の幅を設定できます。

于 2013-01-22T10:26:21.933 に答える
0

画像とテキストの両方に Float プロパティを追加し、画像を div に追加して左揃えにし、div の高さを 100% に設定します。私はそれがうまくいくと思います

于 2013-01-22T06:07:15.087 に答える
0

HTML が次のような場合:

<div class="content-container">
  <p><img src="whatever" /> text text text text text
     text text text text text text text text text text text
     text text text text text text text text text text text
     text text text text text text text text text text text
     text text text </p>
</div>

それでは、CSS だけでそれを行う方法はありません。次のような jQuery フレーバーを追加します。

// Loop through all the images
$('.content-container img').each(function(){
    // Get image height
    var imageHeight = $(this).height();
    // Get container's height
    var containerHeight = $(this).parent('.content-container').height();
    // Set image bottom margin to container's height - image height
    jQuery(this).css('margin-bottom', (containerHeight - imageHeight) + 'px');
})
于 2013-01-22T06:08:26.543 に答える