关于float属性使margin属性失效问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
*{
margin:0;
padding:0;
}
.header{
top:0px;
width:100%;
height:60px;
background:black;
font-weight:bold;
position:fixed;
z-index:34;
font-size:18px;
color:white;
font-family:'微软雅黑';
}
.logo{
float:left;
}
.logo img{
width:220px;
height:60px;
}
.nav{
float:right;
height:60px;
right:100px;
overflow: hidden;
position: absolute;
}
.li{
display:inline-block;
line-height:60px;
margin-left:60px;
cursor: pointer;
}
.float{
width:100%;
height:560px;
margin-top:60px;
overflow:hidden;
zoom:1;
background: #b7cefa;
}
.left{
width:30%;
height:100%;
float:left;
}
.left-main{
margin-top: 50px;
margin-left:90px;
line-height: 45px;
}
.left-main div .pink{
background: pink;
}
.left-main div span:nth-child(2){
display: inline-block;
margin-left: 10px;
}
.center{
width:30%;
height:100%;
float: left;
}
.center-main{
margin-top:60px;
margin-left:110px;
line-height: 45px;
}
.right{
width:39.5%;
height:100%;
float: left;
border-left: 5px solid orange;
position:relative;
}
.rignt-main{
line-height: 45px;
float:right;
}
.right-main input{
width:240px;
height:30px;
}
.right-main .special{
background:red;
color:white;
}
.footer{
font-size:18px;
color:white;
font-family:'微软雅黑';
bottom:0px;
width:100%;
position:fixed;
height:60px;
line-height:60px;
background: black;
text-align: center;
z-index:20px;
}
.cons{
display: inline-block;
margin-left:60px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="logo.png"/></div>
<div class="nav">
<span class="li">课程</span>
<span class="li">职业路径</span>
<span class="li">实战</span>
<span class="li">猿问</span>
<span class="li">手记</span>
</div>
</div>
<div class="float">
<div class="left">
<div class="left-main">
<h4>课程推荐</h4>
<div>
<span class="pink">职业路径</span>
<span>HTNL5与CSS3实现动态网页</span>
</div>
<div>
<span class="pink">职业路径</span>
<span>零基础入门Android语法与界面</span>
</div>
<div>
<span class="pink">职业路径</span>
<span>iOS基础语法与常用控件</span>
</div>
<div>
<span class="pink">职业路径</span>
<span>PHP入门开发</span>
</div>
<div>
<span class="pink">职业路径</span>
<span>Java入门开发</span>
</div>
</div>
</div>
<div class="center">
<div class="center-main">
<h4>相关课程</h4>
<div>HTML CSS JavaScript</div>
<div>HTML5 CSS3 Jquery</div>
<div>移动端基础 移动端APP开发</div>
</div>
</div>
<div class="right">
<div class="right-main">
<h4>登录</h4>
<br/>
<div class="login">
<input type="text" name="username" placeholder="请输入登录邮箱/手机号"/><br/><br/>
<input type="password" name="password" placeholder="6~16位密码，区分大小写，不能用空格" /><br/><br/>
<input type="button" name="login" value="登录" class="special" />
</div>
</div>
</div>
</div>
<div class="footer">
<span class="cons">网站首页</span>
<span class="cons">企业合作</span>
<span class="cons">人才招聘</span>
<span class="cons">联系我们</span>
<span class="cons">常见问题</span>
<span class="cons">友情链接</span>
</div>
</body>
</html>
最右边的div区块无论怎么用margin或者padding都无效，不能使登录界面的div进行排版布局，请老师帮我看看。
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星