将两个 CSS 图像并排放置，而不是在下方答案

【问题标题】：Positioning two CSS images next to each other and not below将两个 CSS 图像并排放置，而不是在下方
【发布时间】：2014-10-01 15:58:54
【问题描述】：

我正忙着制作这个网站的主页，但遇到了一个问题，这个问题一定很简单，但我在任何地方都找不到，我想把“topskin”和“topskin2”放在一起，我也会添加更多我也想要彼此相邻的内容。

这里是 HTML：

<div id="secondinner">
<div id="topskin">
</div>

<div id="topskin2">
</div>
This is the third segment to the home page.
</div>

这里是 CSS：

#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}


#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;

}

#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}

只是为了通知你，我在两个元素上都尝试了 float:left，而不是彼此下方，它们只是消失了。

【问题讨论】：

孩子的float:left;display:inline-block;和父母的overflow:hidden怎么样？
感谢所有这些工作，但我仍然有一个问题，即我的周围包装（即白色背景）无法拉伸并绕过内联图像
这是一个现在的例子，imgur.com/KSOpWU4
从上面的图片可以看出，周围的包装只是围绕“这是……”文本，它完全忽略了两个图像
也许，你应该更好地创建交互式JSFiddle

标签： html css

【解决方案1】：

有两种方法可以做到这一点。

在 #topskin 和 topskin2 上使用 float:left
使用显示：内联块；关于#topskin 和 topskin2

【讨论】：

【解决方案2】：

尝试使用浮点数。

FIDDLE

#secondinner {
    padding-top:300px;
    width:980px;
    margin:0 auto;
}
#topskin {
    background-image:url(images/topskins/1f.png);
    background-size:110px;
    height:220px;
    background-repeat:no-repeat;
    width:150px;
    border:2px solid;
    float:left;
}
#topskin2 {
    background-image:url(images/topskins/1f.png);
    background-size:110px;
    height:220px;
    background-repeat:no-repeat;
    width:150px;
    border:2px solid;
    float:left;
}

【讨论】：

感谢所有这些工作，但我仍然有一个问题，我周围的包装（即白色背景）没有拉伸并绕过内联图像

【解决方案3】：

您只需添加display: inline-block..

使用此代码，即使您添加的图像与 div 类为 img-container 的图像一样多，它们也会内联显示。

这是适合您的工作代码。

<div id="secondinner">
<div id="topskin" class="img-container">
</div>

<div id="topskin2" class="img-container">
</div>
This is the third segment to the home page.
</div>

img-container 是具有以下 css 属性的类。

.img-container{
     display:inline-block;   
}

JSFIDDLE 演示：http://jsfiddle.net/rahulrulez/5mnxqphx/

【讨论】：

【解决方案4】：

我看到你的图片，你的元素从 div 中浮现出来。您必须将 overflow:hidden 设置为它们的父级以避免这种情况。

#secondinner {
  overflow:hidden
}

每个孩子都必须浮动：

#topskin, #topskin2 {
  float:left
}

【讨论】：

这绝对是完美的，感谢您抽出宝贵时间帮助我，最好的问候