Question

我有两个具有背景图像的div，我想在第二个div中添加边距但是它会创建空白区域。

如何在将div保持在另一个div内的同时添加上边距？

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo {
   background-image: url(image/logo2.png);
   height:40px;
   width:400px;
   margin-left:100px;
   display:block;
   margin-top:20px;
}

.background {
   background-image: url(image/empback.png);
   width:100%;
   height:94px;
   min-width:1345px;
}

Answer 1

您可以在父元素上使用overflow: auto

.background{
    background: #f00;
    width:100%;
    height:94px;
    min-width:1345px;
    overflow: auto;
}

Demo

刚刚找到与此问题相关的share链接。

此外，更好的方法是使用position: absolute;，position: relative;，top和{{1}，而不是left使用right }属性，它不仅会使元素保持浮动状态，还可以避免将其他元素放在同一个块中。

Demo 2

Answer 2

您可以在此处使用css position媒体资源。

示例代码

<div class="background">
    <div class="logo">
    </div> 
</div>

.logo
{
    background-image: url(image/logo2.png);
    height:40px;
    width:400px;
    margin-left:100px;
    display:block;
    position:absolute;
    top:20px;
}

.background
{
    background-image: url(image/empback.png);
    width:100%;
    height:94px;
    min-width:1345px;
    position:relative;
}

删除margin-top:20px;并为position添加top和.logo属性。

Answer 3

完成代码。

只需更改position和top值即可获得结果。

.logo{
    position: relative;
    top: 10px;
    background-color: black;
    height: 40px;
    width: 400px;
    margin-left: 100px;
    display: block;
    margin-top: 20px;
}

.background{
     position: absolute;
     background-color: green;
     width: 100%;
     top: 50px;
     height: 94px;
     min-width: 1345px;
}

Answer 4

不改变位置并仍然获得期望的结果怎么样？

将此行添加到后台类：

.background{
    border-top: 1px solid transparent;
}

在另一个div里面的div到div

4 个答案: