Question

我正在忙着制作这个网站的主页，但是遇到了一个问题，这个问题必须如此简单，但我无法在任何地方找到它，我想定位两个＆＃39; topskin＆＃39;和＆＃39; topskin2＆＃39;彼此相邻，我也将添加更多，我也希望彼此相邻。

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

只是告诉你，我已尝试浮动：左，两个元素，而不是低于对方，他们只是消失。

Answer 1

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

使用float：left on #topskin和topskin2
使用display：inline-block;在#topskin和topskin2

Answer 2

尝试使用float。

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

Answer 3

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

使用此代码，即使您添加具有类img-container的div的图像，它们也将显示为内联。

这是适合您的工作代码。

<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 DEMO：http://jsfiddle.net/rahulrulez/5mnxqphx/

Answer 4

我看到你的图像，你的元素浮出了div。您必须将overflow:hidden设置为其父级才能避免这种情况。

#secondinner {
  overflow:hidden
}

每个孩子都必须漂浮：

#topskin, #topskin2 {
  float:left
}

将两个CSS图像定位在彼此旁边而不是下面

4 个答案: