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

どうですか：

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 に答える
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 に答える