Question

我的网页上有一个项目标题作为标题。这个项目标题位于名为“pagetitle”的div中。在项目标题之后，我有两个单词，一个必须在左边，另一个在右边。我希望在“pagetitle”div中的所有内容都是白色背景，在两个单词之后留下底部的空间。我试过两个单词的“padding-bottom：10px”。但是，白色背景不会延伸到覆盖10px。我可以知道该怎么办？

干杯，正红

<div class ="pagetitle" style="background-color:black;">
        <center style="padding: 10px 0 0 0">Executive Summary Dashboard<center>
        <br><left style="float:left; padding:0 0 10px 10px;">Subject Selected:</left><right style="float:right;padding:0 10px 10px 0; background-color:green; margin-bottom:10px;">Time frame:</right></br>
        </div>

Answer 1

你需要清除漂浮物。

将此添加到您的css

.clearfix：before，.clearfix：after {content：“\ 0020”;显示：块;身高：0;溢出：隐藏; } .clearfix：{clear：both; } .clearfix {zoom：1; }
将class .clearfix添加到你的顶级div，这样你就有div class =“pagetitle clearfix”

Answer 2

你必须“包含”你的花车。实现这一目标的一种方法是在容器元素上设置overflow: hidden。还有其他一千种技术，称为clearfixes（你可以在互联网上找到很多），其中一些涉及在其上添加一个带有clear: both的元素。

jsFiddle Demo with your code fixed

有人建议阅读：

Answer 3

-left和right不是valid html tags

- 分离你的html和样式（使用外部样式表）

示例fiddle

css框模型不使用填充拉伸

3 个答案: