html - 无法让图像跟随同一 div 中的文本

Question

我正在尝试在具有 12 列的网格的同一行上创建一行文本，然后是图像。

由于某种原因，图片 2 与图片 1 的文本显示一致，然后图片 2 与图片 1 的文本一起显示。

看起来 div 中的文本和图像元素在彼此的上方/下方。我想要的是他们肩并肩。

我该如何解决这个问题？我在这里提出了代码

http://jsfiddle.net/Dano007/P7nzy/embedded/result/

http://jsfiddle.net/Dano007/P7nzy/

HTML

<div class="grid_6">
    <p class="text">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</p>
    <p class="image omega"><img src="img/cheese1.jpg" alt="Contact us"></p>
</div>

<div class="grid_5">
    <p class="image"><img src="img/cheese2.jpg" alt="Contact us"></p>
    <p class="text omega" id="text_left">"Wow, amazing cheese selection and  very fast delivery!"</p>
</div>

CSS

.text {
    display:inline-block;
    font-size: 3.0em;
    text-align: right;
}

#text_left {text-align: left; }

.image {
    display:inline-block;
    text-align: center;
    border:solid 4px #6b5221;
}

Answer 1

您可以尝试为文本内容添加宽度，如下所示。

.text {
    display:inline-block;
    font-size: 3em;
    text-align: right;
    width: 80%; /* added this */
}

Demo Fiddle

您也可以按照 Ollie 在他的回答中提到的方式使用它。这取决于您想要的外观。