Question

嗨我的html和css代码有问题。我试图将所有内容中心对齐在浏览器中，只要调整大小，但保持背景颜色水平连续流动。我有以下代码，但似乎背景颜色与我页面中的某些部分重叠。我错过了什么或做错了什么？非常感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

h4 {
    color: #db870a;
    font-size:16px;
}

.threeCol {
    display:block;
    float:left;
    width:30.50%;
    padding:30px 0px;
    text-align:justify;
}

/*Alterations*/
.noSpaces {
    margin:0px;
    padding:0px;
}

.float {
    float:left;
}

.alignR {
    text-align:right;
}

.paddingR {
    padding:10px 30px 10px 0px;
}

.paddingL {
    padding:10px 0px 10px 30px;
}

.noPadding {
    padding: 10px 0px 10px 0px;
}


/*footer*/

#footer {
    display:block;
    background-color:#F60;

}


/*Other Articles*/

#otherArticles {
    font-size:12px;
}

</style>



<body>

<section id="otherArticles">
    <div class="wrapper">
    <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="threeCol noPadding">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
    </div
></section>

<br />

<footer id="footer">
<div class="wrapper">
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin</div>
</footer>

</body>
</html>

Answer 1

例如

http://jsfiddle.net/amkrtchyan/DtgQR/

当你写一个html5实际上是一个html5 doctype <!DOCTYPE html>

Answer 2

尝试更改

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

到

#otherArticles{
width:850px;
margin:0 auto;
}

Answer 3

您的代码存在的问题是您只为页脚设置颜色在body标签后面开始您的页脚标记。只需要更改页脚标记的起始位置。

Answer 4

更正确的代码......你应该使用外部CSS。

无标题文档

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

section {
    width:850px;
    margin:0 auto;
    overflow:auto;
}

h4 {
    color: #db870a;
    font-size:16px;
}

article {
    display:block;
    float:left;
    padding:30px 0px;
    text-align:justify;
    width:30%;
    margin-right:3%;
}

article.last{margin-right:0;}


/*footer*/

footer {
    display:block;
    background-color:#F60;
}


</style>



<body>

<section>
    <article >
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article>
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="last">
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
</section>

<footer>
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin
</footer>

</body>
</html>

无法获取背景颜色以填充我页面中的正确部分（HTML / CSS）

4 个答案: