垂直对齐图像和文本

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;
}

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

注意:永远不要忘记清除你的花车......你也可以将它包装在一个容器div中

休息:

你可以给你想要浮动的img类,而不是使用img{float: left;}你应该使用img.class_name {float: left;}它以便精确地定位图像,你也可以像Sam Carrington告诉你的那样将p元素包装在元素内部以便你可以填充文字,还有它的风格......

演示小提琴

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