61,112
社区成员
发帖
与我相关
我的任务
分享float为什么没有生效
<!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>无标题文档</title>
<style type="text/css">
*{margin:0;
padding: 0;
}
.header_inner,.nav_inner,.banner_inner,.main_inner,.footer_inner,.copy_inner{
margin: 0 auto;
width: 1400px;
}
#header{
height:50px;
background-color:#555;
}
.header_inner p{
line-height: 50px;
font-size: 11px;
color: #fff;
float: left;
font-family: actor;
}
.icon{
float: right;
}
#background{
background-color: #eee;
}
#nav{
height:152px;
background-color:#eee;
}
.logo{
margin-top: 40px;
float: left;
}
.nav_nav{
float: right;
}
#banner{
height:462px;
background-color:#eee;
}
#main{
height:12852px;
background-color:#eee;
margin-top: 40px;
}
.main_title{
height: 209px;
border-top: #ff5b02 4px solid;
background-color: #fff;
background-image: url(images/tu_17.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.main_title h4{
line-height: 56px;
font-size: 12px;
color: #fe5512;
text-align: center;
margin-top: 14px;
font-family: "Adobe 黑体 Std R";
}
.main_title p{
line-height: 24px;
font-size: 10px;
font-family: actor;
text-align: center;
}
.botton_readmore{
margin: 0 auto;
width: 126px;
margin-top: 25px;
}
.recommendself1{
width: 320px;
height: 264px;
float: left;
margin-top: 40px;
background-color: #fff;
background-image: url(images/tubiao_24.jpg);
background-repeat: no-repeat;
}
.recommendself2{
width: 320px;
height: 264px;
float: left;
margin-top: 40px;
background-color: #fff;
background-image: url(images/tubiao_26.gif);
background-repeat: no-repeat;
}
.recommendself3{
width: 320px;
height: 264px;
float: left;
margin-top: 40px;
background-color: #fff;
background-image: url(images/tubiao_29.jpg);
background-repeat: no-repeat;
}
.recommendself_title{
margin-top: 22px;
text-align: center;
line-height: 56px;
background-image: url(images/line_11.jpg);
background-repeat: no-repeat;
background-position: center bottom;
font-family: "Adobe 黑体 Std R";
font-size: 12px;
}
.recommendself_type{
line-height: 28px;
margin-top: 18px;
font-size: 14px;
}
#footer{
height:553px;
background-color:#555;
}
#copy{
height:81px;
background-color:#444;
}
</style>
</head>
<body>
<div id="header">
<div class="header_inner">
<p>E-mail:mail@yoursite.com | Mobile:123 456 789</p>
<div class="icon">
<img src="images/nav_02.jpg"/>
<img src="images/nav_03.jpg"/>
<img src="images/nav_04.jpg"/>
<img src="images/nav_05.jpg"/>
<img src="images/nav_06.jpg"/>
<img src="images/nav_07.jpg"/>
</div>
</div>
</div>
<div id="background">
<div id="nav">
<div class="nav_inner">
<div class="logo"><img src="images/loge_11.jpg"/></div>
<div class="nav_nav"></div>
</div>
</div>
<div id="banner">
<div class="banner_inner"><img src="images/banner_11.jpg"/></div>
</div>
<div id="main">
<div class="main_inner">
<div class="main_title">
<h4>THIS IS TITLE FOR CALLOUT BOX</h4>
<p>if you are looking for unique multitask wordpress theme with custom grid that is builded for mobile devices,laptops and desktop computers you're in the right place. 1440px grid gives <br />
your opportunity to bulid your site make it stand out from the crowd.</p>
<div class="botton_readmore"><img src="images/tu1_21.jpg"/></div>
</div>
<div class="recommendself1">
<h4 class="recommendself_title">FRESH DESIGN
</h4>
<p class="recommendself_type">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae gravida sodales ligula at congue.cras at congue quam. Pellentesque auctor mauris eutellus dapibus varius.Phasellus ornare massa id dui convallis quis malesuada nibh posuere.
</p>
<div class="recommendself2">
<h4 class="recommendself_title">CUSTOMIZABLE</h4>
<p class="recommendself_type">Mauris luctus volutpat vehicula.Sed ut est et leo ultrices suscipit.Fusce rutrum volutpat ullamcorper.Curabitur utelementum lacus.Quisque a libero odio,non malesuada augue.Curabitur volutpat magna vel eros placerat iaculis.Sed vitae ligula turpis.Nulla in metus justo,sed venenatis libero.</p>
<div class="recommendself3">
<h4 class="recommendself_title">
CUSTOM 1440PX GRID</h4>
<p class="recommendself_type">Vestibulum interdum urna diam,non euismod tellus.Pellentesque convallis volutpat sem ac laoreet.Phasellus retrum mauris sed orci euismod sit amet venenatis dui biben dum.Nullam ornare magna sed nisi sollicitudin quis mattis lacus sodales.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer_inner"></div>
</div>
<div id="copy">
<div class="copy_inner"></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
三金de鑫 2018-09-22
- 打赏
- 举报
在你的id="main"里的class="main_inner"中的出现了高度塌陷，也就是说你这个父容器的高还没有子容器的高达，而且你这个自容器class="recommendself1"里还有一个嵌套的一模一样的盒子。这更不可能使你的页面达到你想要的效果，总的来说你的布局是有问题的
