Question

嘿伙计们我的css有点问题，我无法弄清楚它为什么会这样做。块被放置在容器内部，它应该将自己推离容器位置，而是将整个容器向下推？有人可以解释出了什么问题吗？提前谢谢！

Html

<div id="header">
</div>
<div id="container">
<div id="block">
</div>
</div>

的CSS

#header {
width: 100%;
height: 80px;
background-color: black;
}

#container {
width: 70%;
height: 500px;
background-color: green;
margin: 0 auto;
}

#block {
width: 300px;
background-color: red;
height: 300px;
margin-top: 50px;
}

Answer 1

它将容器向下推，因为#block元素位于#container元素中。

如果你改变你的html标记：

<div id="header"></div>
<div id="container"></div>
<div id="block"></div>

#block元素将使自己远离#container元素。

Example Fiddle

<强>更新

如果您想保留HTML结构，只需提供#block以下css：position: absolute;。

Working Fiddle

Answer 2

overflow:auto到#container应该这样做。

Answer 3

除非在父容器上指定填充，否则边距会在其容器外部出血。在与子元素边距相邻的边上给出父1px填充

Answer 4

您需要浮动子元素，或更改显示属性以更改它在父元素内的位置。

<强>浮动

HTML 的

<div class="header"></div>
<div class="wrap">
    <div class="content"></div>
</div>

SCSS

.header {
    width: 100%;
    height: 80px;
    background-color: black;
}

.wrap {
    width: 70%;
    height: 500px;
    background-color: green;
    margin: 0 auto;
    .content {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
}

JSFiddle

<强>显示

或者只是更改显示：子元素的内联块

HTML相同代码

SCSS

...
.content {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        background: red;
        display: inline-block;
    }...

边际推动父元素而不是自身

4 个答案: