1

画像の下にある他のテキストを移動せずに、画像とテキストを水平方向に揃えるにはどうすればよいですか

私はこれをするのが好きです（サンプルXXXXXは大きな画像です）

XXXXXXXX  This is a big image.
XXXXXXXX  all text should not goes 
XXXXXXXX  down the image
XXXXXXXX

しかし、問題は私のテキストが画像の下に落ちたことです

XXXXXXXX  This is a big image.
XXXXXXXX  
XXXXXXXX  
XXXXXXXX
all text should not goes down the image

助けてください。

これが私のコードです

<div id = 'wrap'> 
   <div class='image'>
     <img src="/test/1.jpg" />
     This is a big image  all text should not goes down the image
   </div>
   <div class='image'>
     <img src="/test/2.jpg" />
     This is a big image  all text should not goes down the image
   </div>

</div>

使ったCSS...

#wrap {
   overflow: auto; 
   height: 300px; 
}

.image{ 
    border-top-style:outset;
}

#wrap > div > img {
    width : 80px;
     height : 70px;
     margin-left:5px;
     margin-top:5px;
     margin-bottom:5px;
     padding-bottom: 4px; 
     float:left;
    clear:left;
}
4

3 に答える 3

6

画像を左にフロートするだけ

img {
   float: left;
}

画像を左にフローティングすると、右側に空のスペースが作成され、テキストが希望どおりに設定されます。

注：フロートをクリアすることを忘れないでください...また、これをコンテナdiv内にラップすることもできます

休み ：

フロートしたいimgにクラスを与えることができるので、使用する代わりに使用しimg{float: left;}てimg.class_name {float: left;}、画像を正確にターゲットにする必要があります。また、 Sam Carringtonpが言ったように、要素内のテキストをラップしてパディングできるようにすることもできますテキストとスタイルも...

デモフィドル

HTML

<div class="wrapper">
    <img class="to_the_left" src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <p class="paragraph">Hi this is big long text I want to place it to the right of my image</p>
    <div class="clear"></div>
</div>

CSS

.wrapper {
    border: 1px solid #f00;
}

.to_the_left {
    float: left;
}

.clear {
    clear: both;
}

p.paragraph {
    padding-top: 30px; /* You can set accordingly */
}
于 2013-02-08T11:20:55.557 に答える
0 
#wrap .image img { float: left; width: 200px;}
于 2013-02-08T11:30:17.290 に答える
0

セマンティック要素内の div に常にテキストを含める必要があります。これには、css を使用して一意のコンテナー内のテキストをターゲットにできるという利点があります。

<div class='image'>
  <img src="/test/1.jpg" />
  <p class="sidebar">This is a big image  all text should not goes down the image</p>
</div>
于 2013-02-08T11:26:05.843 に答える