Вертикально совместите изображение и текст

Question

Как выровнять изображение и текст по горизонтали без перемещения другого текста под изображением

Я хотел бы сделать это (образец хххого большого изображение)

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;}, чтобы он точно нацелился на изображение, также вы могли бы обернуть текст внутри элемента 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 */ 
} 

Answer 2

Вы всегда должны содержать текст в 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> 

Answer 3

#wrap .image img { float: left; width: 200px;}