Question

我将我的徽标和H1文本浮动到左侧的标题中。我确保在我的中殿栏中清除那些花车，但发生了一些奇怪的事情，应该应用于头部的渐变消失了。有人知道为什么吗？

这是我的html片段：

<body>
<div class="contentwrapper">
<!-- beginning of header element -->
<div class="gradientheaderfooter">
 <header class="banner" role="banner">
   <img src="images/GoodKarmaBikes_LogoRGB_Web.jpg" alt="Good Karma Bikes GKB Logo">  
   <h1>Good Karma Bikes</h1>
 </header>
</div>
</body>

这是我的CSS的片段：

body {
background-image: url(../images/GKBBackground_Gradient1.png);
background-repeat: repeat-x;
}

.contentwrapper {
max-width: 1366px;
margin: 0 auto;
outline: 1px solid #333333;
}

.gradientheaderfooter {
background-image:
linear-gradient(
  to bottom,
  silver, green 90%
);
}

.banner {

}

.banner img{
float: left;
}
.banner h1{
float: left;
font-size: 6em;
text-align: center;
}

我将这些代码放入jsfiddle，但徽标不会显示。这里是jsfiddle的链接：

http://jsfiddle.net/shihfa/haqkbgq4/

感谢您的帮助！

Answer 1

通过提问，然后自己回答，我并不是说傲慢。但我从我的教授那里得到了答案，我认为那里的人可以使用解决方案解决这个问题。

将代码更改为：

/* === Eliminate the div class below === */
.gradientheader {
}
/* === Eliminate the div class above === */

.banner {
 background-image:
linear-gradient(
to bottom,
silver, green 90%
);
overflow: hidden;
}
/* === Add "overflow: hidden;" above. When you float elements inside of another element, the     
parent element collapses and does not acknowledge the existence of the child floated elements. 
"overflow: hidden" on the parent element is one way to contain the floats. === */

.banner img{
float: left;
margin: 0 40px 0 0;
}

.banner h1{
float: left;
font-size: 6em;
text-align: center;
}

Answer 2

.banner {
   overflow:hidden;
}

在你的CSS中添加它。

浮动应用于标题中的徽标和文本后，渐变消失

2 个答案: