Question

我有一个名为“maincontent”的父div，另一个叫做“leftlist_head”。我想防止leftlist head的背景包含在maincontent中。

请参阅小提琴here:

HTML：

<div id="MainContent">  
<article id="post-1031" class="post-1031 page type-page status-publish hentry">
    <div class="leftlist_head">
            <span><a href="javascript:;" class="sort active showall">Show All</a></span>
            <span><a href="javascript:;" class="sort complete">Completed</a></span>
            <span><a href="javascript:;" class="sort incomplete">Incomplete</a></span>
    </div>
</article>
</div>

CSS：

#MainContent {
float: left;
margin: 20px 20px;
width: 62%;
border: 1px solid;
}

#MainContent article.page {
border: 0 none;
margin: 0;
padding: 0px;
position: relative;
}

.leftlist_head {
background: #DADADA;
border: 1px solid #CFCFCF;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
height: 40px;
margin: 15px 0 -1px 0;
padding: 0 8px 0 8px;
display: inline-block;
width: 100%;
}

Answer 1

如果我理解正确，你想要.leftlist-head能够留在一条线而不是去另一条线的父级div？试试这样：

.leftlist_head {
    position: absolute;
    top: 15px;
    left: 0;
    overflow: visible;
}

你也有width: 100%;。您可能需要也可能不需要调整此项。如果上面的代码没有完全按照您的意愿执行，请尝试从代码中删除宽度行。

Answer 2

您可以将position：absolute属性添加到.left list_head 左派头可以像这样

.leftlist_head {
background: #DADADA;
border: 1px solid #CFCFCF;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
height: 40px;
margin: 15px 0 -1px 0;
padding: 0 8px 0 8px;
display: inline-block;
width: 100%;
position:absolute;
}

Answer 3

Fiddle Demo

提供#MainContent，height:100%;

另外，添加

body, html {
    height:100%;
}

给你css，给maicontent一些基础%age来计算自己的宽度和高度，这会给MainContent所需区域的高度

此外，在您的.leftlist_head中，您已分配width: 100%;，然后您正在添加padding，这会强制div为flow out的父级作为width = 100% + padding ...如果可能，请避免填充或缩小宽度

Answer 4

检查 demo 。

更改css定义如下 -

#MainContent {
float: left;
margin: 20px 20px;
width: 62%;
border: 1px solid;
overflow:hidden;
}

防止“子div”重叠“父div”

4 个答案: