Как закрыть разрыв между изображением и текстом?

Question

Я не понимаю, почему у меня большой разрыв между вторым изображением и текстом справа. Я прикрепил скрипку для кода. Как мне закрыть этот пробел?

http://jsfiddle.net/7Qchr/

.main { 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 2px; 
    -webkit-columns: 2; 

} 

#image { 
    max-width: 100%; 
} 

<div class="main"> 
    <p id="text_l"> 
     &ldquo; The best selection of cheese I've ever seen! Cannot wait for our  next order!&rdquo; 
    <p> 
    <img src="img/cheese1.jpg" alt="Picture of cheese" id="image"> 
</div> 

<div class="main"> 
    <img src="img/cheese2.jpg" alt="Picture of cheese" id="image"> 
    <p id="text_r"> 
     &ldquo; Wow,amazing cheese selection and fast delivery! I highly recommed you try!&rdquo; 
    <p> 
</div> 

Answer 1

Вам придется переписать код немного ... Попробуйте что-то вроде этого:

HTML

<div class="main"> 
    <div> 
     <p id="text_l">blah</p> 
    </div> 
    <div> 
     <img src="cheese1.jpg" class="image"> 
    </div> 
</div> 
<div class="main"> 
    <div> 
     <img src="cheese2.jpg" class="image odd"> 
    </div> 
    <div> 
     <p id="text_r">blah</p>   
    </div> 
</div> 

CSS

.main div{ 
    width: 48%; 
    display: inline-block; 
    vertical-align: top; 
} 
.image { 
    max-width: 100%; 
    padding: 0 10px; 
} 
.image.odd {float: right;} 

http://jsfiddle.net/7Qchr/6/

Answer 2

Обновлено Demo

была добавлена ​​следующая CSS (ни один из существующих HTML или CSS был изменен).

.main + .main { 
    text-align: right; 
} 
p { 
    text-align: left; 
}