0

有我的代码。( jsfiddle ) 为什么我的这部分代码没有运行？

header{background-color: #2bd5ec;}

我想为标题标签添加背景颜色。我需要做什么？

4

5 回答 5

1

这里的问题是，由于您内部的元素header是浮动的，因此它们被视为与您的标题不同的流程，因此它不会调整大小以适应它们。

解决此问题的一种方法是附加<div style = "clear: both;"></div>到您的header; 小演示：小链接。

您也可以只添加overflow: hidden;到您的header：另一个小链接，或者也可以添加float：另一个小链接。

于 2012-09-05T10:22:42.723 回答
1

您可以设置页眉的高度。例如 ：

header{background-color: red; height:100px;}

你可以像这样使用“清除”：

 <header>
     <div id="info">
         <h1>Oyunn.in</h1>
     </div>
     <div id="categories">
         <p>Barbie - Benten - Senten</p>
     </div>
     <br clear="all"/>
</header>​

和CSS：

header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}​
于 2012-09-05T10:25:31.953 回答
0

添加

header{background-color: #2bd5ec;width:100%; height:30px;}

背景属性通常需要div的尺寸

于 2012-09-05T10:21:46.980 回答
0

利用overflow:hidden

header{background-color: #2bd5ec; overflow:hidden;}

overflow CSS 属性指定是否剪切内容、渲染滚动条或显示块级元素的溢出内容。

使用与默认值不同的溢出visible属性将创建一个新的块格式化上下文。这在技术上是必要的，就好像浮动会与滚动元素相交，它会强制将可滚动元素的内容重新包装在侵入的浮动周围。重新包装会在每个滚动步骤之后发生，并且会导致滚动体验太慢。请注意，通过以编程方式将 scrollTop 设置为相关的 HTML 元素，即使溢出具有隐藏值，元素也可能需要滚动。

溢出声明告诉浏览器如何处理不适合盒子的内容。这假设盒子有一个高度：如果没有，它会变得尽可能高以包含其内容，并且溢出声明是无用的。

看演示

于 2012-09-05T10:23:22.153 回答
0

实际上你没有清除你的孩子浮动所以每当我们使用浮动所以我们应该清除浮动，我们可以overflow: hidden;在我们的父 div 中清除孩子浮动的 div。

header {
    background-color: #2BD5EC;
    overflow: hidden;
}

看演示：- http://jsfiddle.net/vE8rd/17/

于 2012-09-05T10:26:57.667 回答