0

インライン ブロック機能を使用してすべての応答性を維持したいのですが、問題が発生しています。

問題は、背景画像が表示されず、それらが互いに積み重ねられているのとは対照的に、水平 (横並び) ではないことです..何が欠けていますか?

ここで発生している問題をすぐに再現しました。

フィドル

HTML:

<section>
                    <div class="first">
                        <p>hello this is some text</p><p>and here is some more text </p>
                    <div class="ipad"></div>
                    </div>
                </section>

CSS:

.first {
    display: inline-block;
}

.ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
}

私はおそらく非常に単純なものを見逃しています.私はGoogleをたくさん持っていますが、まだ途方に暮れています.

4

3 に答える 3

3

2つのこと..

  1. <p>段落をインラインにしたい場合inline-blockは、親ではなく段落に追加する必要があります。

    .first p{
    display: inline-block;
}

  2. div のスタイルで高さと幅を指定すると、画像が表示されます。

    .ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    height:100px; //<- provide height
    width:100px; //<- provide width
}

編集:すべての子が幅に関係なくインラインになるようにするには、親でこれを使用します.first:

.first{
    white-space:nowrap;
}

更新されたフィドル:

http://jsfiddle.net/NQ4Yv/2/

于 2013-08-04T14:25:04.110 に答える
0

まず、iPad の画像を表示するには、div に寸法を指定する必要があります。

.ipad {
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    width: 220px;
    height: 274px;
}

次に、float:leftまたはdisplay:inline-blockを設定し<p>て、それらを隣り合わせに移動させます。

.first p{
    display: inline-block;
}

フィドルを参照してください：http://jsfiddle.net/NQ4Yv/3/

段落の背景画像が必要な場合は、次のようにします。

.first{
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/IPad_3.png/220px-IPad_3.png) no-repeat;
    display: inline-block;
    border: 1px solid #333;
    width: 220px;
    height: 274px;
    padding: 0 20px;
}
.first p{
    display: inline-block;
    color: white;
}

更新されたフィドル: http://jsfiddle.net/NQ4Yv/4/

于 2013-08-04T14:25:50.160 に答える
0

あなたが使用することができます

p {
   float: left
}

パラグラフを並べて表示します。

于 2013-08-04T14:17:34.590 に答える