3

我正在使用具有侧边栏/标注框的页面布局，该边栏/标注框浮动到一大块文本内容的一侧，并且文本内容可能有一些带有不同背景颜色的通知横幅。

这是问题（这里是完整的 JSFiddle ）：

不受欢迎的：

不良行为

正如模型中的文本所说，请注意粉红色的“通知”横幅与黄色侧边栏重叠（margin仅将文本踢回，而不是与其重叠的块元素的边缘）。我希望它看起来更像：

期望的行为 粉色背景停在侧边栏的边缘。我可以通过设置通知横幅的宽度在模型中完成此操作（因为我知道它会与侧边栏相交），但是如果该通知出现在页面下方，那么它不会扩展到整个宽度。

是否有某种结构/样式可以让我完成这种外观，并且对于通知横幅出现在内容中的位置灵活？

4

4 回答 4

5

您可以简单地添加overflow: auto到您的通知中以阻止其背景泄漏到侧边栏后面，同时保留侧边栏上的边距。

之所以可行，是因为overflow它不会visible干扰浮点数，因为它会创建一个新的块格式化上下文。通常，这会导致框根本不与浮动（及其边距，如果有的话）相交。请记住，由于这个原因，如果通知框的任何部分与浮动相交，这将导致整个通知框及其内容被限制在较窄的宽度内。您可以通过在周围的段落和通知框本身中添加/移动文本来看到这一点（我无法通过小提琴链接轻松地演示这一点）。

规范在第 9.4 节中有这样的说法：

在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式化，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会由于浮动而变窄）。

这指向第 9.5 节：

表格的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而不是“可见”的元素）不得与any 浮动在与元素本身相同的块格式化上下文中。如有必要，实现应通过将其放置在任何先前的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。他们甚至可以使所述元素的边框比第 10.3.3 节定义的更窄。CSS2 没有定义 UA 何时可以将所述元素放在浮动旁边，或者所述元素可以变窄多少。

虽然第二个引用在结尾听起来令人生畏，但您在此处看到的行为非常一致，而不是您开始看到实施偏差的边缘情况。

于 2013-08-27T15:13:49.887 回答
2

用另一个包装器包围你的侧边栏

HTML：

<div id="test">
    <div class="sidebar">
    </div>
</div>

CSS：

#test
{
    /*moved from your old siderbar*/
    float:right;
    width:40%;
    padding-left:1em;
    /*essential*/
    background-color:white;
}
.sidebar
{
    padding:1em;
    background-color:#FFC;
}

看这里：http: //jsfiddle.net/UrsLW/11/

于 2013-08-27T15:11:35.903 回答
2

你可以很聪明，使用白色边框将其后面的内容隐藏起来。

像这样：

.sidebar { 
   border-left: 1em solid #FFF;
}

示例：http: //jsfiddle.net/UrsLW/7/

结果：

结果

于 2013-08-27T15:04:34.677 回答
0

我首先想到的是使用 CSS3 的box-shadow，也许吧？

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    box-shadow: 0px 0px 0px 1em #fff;
}

就此而言，甚至一个简单的边框也可以。

.sidebar {
    float:right;
    width:40%;
    padding:1em;
    margin-left:1em;
    background-color:#FFC;
    border: 1em #fff solid;
}

当然，这只适用于单色背景。

http://jsfiddle.net/UrsLW/5/

于 2013-08-27T15:01:39.240 回答