Question

我想使用内联块功能来保持一切响应，但我遇到了问题。

问题是我的背景图像没有显示出来并且它们不是水平的（并排）而不是它们现在如何堆叠在一起...我错过了什么？< /强>

我很快就重新找到了我在这里遇到的问题：

Fiddle

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，但仍然不知所措。

Answer 1

2件事......

如果您希望段落<p>内嵌，则需要向其添加inline-block，而不是其父级：
```
.first p{
    display: inline-block;
}
```

如果以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/

Answer 2

你可以使用

p {
   float: left
}

并排段落。

Answer 3

首先，为了显示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/

使用内联块问题在文本旁边放置文本

3 个答案: