0

我正在尝试创建一行文本，然后在具有 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;
}
4

3 回答 3

0

像这个小提琴：http: //jsfiddle.net/Hive7/P7nzy/2/

您需要做的是将文本元素的显示设置为内联，如下所示：

display: inline;

还添加：

white-space: nowrap;
于 2013-08-24T09:20:53.190 回答
0

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

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

演示小提琴

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

于 2013-08-24T09:26:58.317 回答
0

怎么样：

CSS：

div.newSection {
    overflow: hidden;
}

div.floatLeft {
    float: left;
    margin-right: 10px;
}

img { height: 50px; }

HTML：

<body>
    <div class="newSection">
        <div class="floatLeft">
            <img src="img/cheese1.jpg" alt="Contact us" />
        </div>
        <div class="floatLeft">"The best selection of cheese I've ever seen! Cannot wait for our next order!"</div>
    </div>
    <div class="newSection">
        <div class="floatLeft">
            <img src="img/cheese2.jpg" alt="Contact us" />
        </div>
        <div class="floatLeft">"Wow, amazing cheese selection and very fast delivery!"</div>
    </div>
</body>

JSFiddle：http: //jsfiddle.net/markwylde/P7nzy/6/

于 2013-08-24T10:23:55.517 回答