如何缩小图像与文本之间的差距？

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