Question

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

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

看起来div中的text和image元素高于/低于对方。我想要的是他们并肩。

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

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

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

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

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

display: inline;

另外添加：

white-space: nowrap;

Answer 2

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

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

Demo Fiddle

你可以像Ollie在他的回答中提到的那样使用它。这取决于你想要的外观。

Answer 3

怎么样：

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/

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

3 个答案: