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;
}

我可能错过了一些非常简单的东西，我有很多谷歌，但仍然不知所措。

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 回答