0

我写了这段代码。这段代码是html和css。

...

#contents
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: white;
    color: black;
    border-top: 3px solid black;
    background-image: url(img/CloverImage.png);
    background-size: 300px 400px;
    background-repeat: no-repeat;
}

#content
{
    margin: auto;
    padding: 50px;
    width: 860px;
    height: auto;
    color: black;
}

...

<div id="contents">
<div id="content">
<p id="title">What are we making?</p>
<div id="mainapp">
    <h1>Pegasus</h1>
    Pegasus is very useful wordpress poster application.<br>
    This app can input html tags easily.<br>
    We're making it to open to the public.
</div>
<div id="subapp1">
    <h1>A to Z</h1>
    HAHAHAHA
</div>
<div id="subapp2">
    <h1>A to Z</h1>
    HEHEHEHE
</div>
</div>
</div>

...

我想将主要内容的背景颜色设置为底部。

但是这段代码做不到。

这是网站。

http://www.clover.lrv.jp

给我一个解决办法。

4

2 回答 2

0

您可以使用 clearfix 或 clear 类来处理浮动行为

清课

HTML

<div id="content">
    <p id="title">What are we making?</p>
    <div id="mainapp"> 
        <h1>Pegasus</h1>
        Pegasus is very useful wordpress poster application.<br>
        This app can input html tags easily.<br>
        We're making it to open to the public.
    </div>
    <div id="subapp1">
        <h1>A to Z</h1>
        HAHAHAHA
    </div>
    <div id="subapp2">
        <h1>A to Z</h1>
        HEHEHEHE
    </div>
    <div class="cb"></div>
</div>

CSS

.cb{
    clear:both;
}

或使用 clearfix 类（基于 html5 样板）

HTML

<div id="content" class="clearfix">
    <p id="title">What are we making?</p>

CSS

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
clearfix:after{
    clear: both;
}
/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.clearfix {
    *zoom: 1;
}

还有很多其他方法可以清除浮动，但是，我希望你明白这个概念。

您可以在这些地方找到有关花车和清除花车的更多信息：

Mozilla 开发者网络 https://developer.mozilla.org/en-US/docs/Web/CSS/float

网络平台 http://docs.webplatform.org/wiki/css/properties/clear

Micro clearfix [html5 样板使用它] http://nicolasgallagher.com/micro-clearfix-hack/

于 2013-08-27T03:38:45.447 回答
0

如果您<div id="contents">在 Chrome devtools 中检查该元素，您会看到它的尺寸没有随其子元素一起扩展，这通常发生在它包含未被该父元素清除的浮动时。

因此，您可以选择使用众多清除修复解决方案中的一种。

最简单的就是添加overflow: hidden到#contents元素的 CSS 中。

CSS

#contents { overflow: hidden; }

您可以在整个模板中重复使用的更高级和更强大的解决方案是Nicolas Gallagher发明的 micro-clearfix ，它明智地将 clearfix 放置在您将添加到 HTML 标记中的类中。

CSS

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

我没有在浏览器中测试过这些，但它们在 chrome 中工作，应该适合你。

于 2013-08-27T03:43:06.293 回答