我正在尝试编码this page。
我不知道如何解决该问题，但似乎overflow:hidden的#bigf会使图像下降并被剪切。如何使#bigf中的所有divs很好地适合一条水平线？谢谢。
HTML：
<html>
<head>
<title>Title</title>
<meta name="Description" content="desc">
<meta name="keywords" content="keywords">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<link type="text/css" href="style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<div id="top">
<div class="container">
<h1>Name</h1>
</div>
</div>
<div id="bigf">
<div class="container">
<img src="hydraulik.png" class="hydra">
<div class="sm1">
<div class="textsec">SOMETHING</div>
<div class="textsec">IS SAID HERE</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
* {
margin:0px;
padding:0px;
}
body {
font-family: 'Exo 2', sans-serif;
}
#wrap {
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
}
#top {
height:60px;
}
.container {
width:1160px;
margin:0 auto;
}
#bigf {
height:380px;
background: url(bf.jpg) right no-repeat black;
overflow:hidden;
}
.textsec {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
display: inline-block;
color: #FFF;
font-weight: 600;
padding: 10px 25px;
outline: 2px solid rgba(51, 51, 51, 0.2);
text-shadow: 2px 3px 0px #000;
margin: 0px 0px 10px;
float:right;
font-size:26px;
}
.hydra {
margin-left:25px;
float:left;
}
.sm1 {
margin-top:150px;
}
最佳答案
将clearfix添加到#bigf .container。
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
并将类添加到容器中。
<div class="container cf"></div>
您已经在其中浮动了元素，因此我建议您阅读以下内容：What is Clearfix