html - 垂直对齐图像和文本

Question

如何在不移动图像下方的其他文本的情况下水平对齐图像和文本

我喜欢这样做(样本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;
}

Answer 1

将图片向左浮动

img {
   float: left;
}

将图像向左浮动后会发生什么，它会在右侧创建一个空白区域，以便文本可以按您想要的方式设置。

Note : Never forget to clear your floats...Also you might like to wrap this up inside a container div

休息:

你可以给你想要 float 的 img 类，而不是使用 img{float: left;} 你应该使用 img.class_name {float: left;} 这样它就可以精确定位图像，您也可以将 p 元素中的文本包装为 Sam Carrington告诉你这样你就可以填充文本并设置它的样式......

Demo Fiddle

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 */
}