Question

sidebar-block的每个10px都有一个保证金底部设置，它显示为sidebar-block.body的内部div流出容器。

我进行了研究和调试，找不到原因，唯一一次使用浮点数就在主#sidebar本身上。

HTML

<div id="sidebar">
    <div class="sidebar-block">
        <div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
        <div class="sidebar-block body"></div>
    </div>
    <div class="sidebar-block">
            <div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
        <div class="sidebar-block body"></div>
    </div>
</div>

CSS

#sidebar {
    float: right;
    width: 268px;
    margin-top: 10px;
}

.sidebar-block {
    margin-bottom: 10px;
}

.sidebar-block.title {
    background-color: #2E392F;
    min-height: 47px;
    color: white;
    font-size: 1.2em;
}

.sidebar-block.body {
    overflow: hidden;
    background-color: white;
}

.text-with-margin {
    width: 100%;
    padding: 0.5em 0.5em 0.5em 0.5em;
    display: block;
}

Answer 1

修正了，因为我使用了.sidebar-block title，.sidebar-block body，以便.sidebar-block的css会自动应用于它们，而不是我的意图所以我重命名了div。 / p>

Answer 2

根据你的评论。更改

的代码

 #sidebar > .sidebar-block 
 {
     margin-bottom: 10px; 
 }

演示：http://jsfiddle.net/fvjw5/1/

Answer 3

您必须设置补充工具栏元素的最大宽度。实际上，侧边栏元素没有固定的大小，这将使

无效

.text-with-margin {
     width: 100%; // The width. You should change this.
     ...
}

有关职位的信息，请参阅此帖子：CSS Positions

你应该尝试类似的东西：

#sidebar {
    width: 100%; // Or whatever size you want the sidebar to be.
    position: relative; // You can play with this for different results.
    ...
}

您可以查看以下答案中提供的信息： Responsive web design

内部div从父div中浮出

3 个答案: