为什么右边这样写达不到效果
为什么右边这样写达不到效果呢.right{height:600px;background:green;float:right;margin-right:0px;margin-left:10px;}
3 回答
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.top {
height: 50px;
border: 1px solid red;
width: 100%;
text-align: center;
}
.main {
height: 150px;
width: 100%;
border: 1px dotted blue;
text-align: center;
}
.left {
height: 100px;
width: 20%;
border: 1px dotted blue;
float: left;
margin-top: 25px;
}
.right {
height: 100px;
width: 78%;
border: 1px dotted blue;
margin-left: 1%;
float: right;
margin-top: 25px;
}
.foot {
height: 50px;
width: 100%;
border: 1px dotted green;
text-align: center;
}
</style>
<body>
<div class="top">top</div>
<!--头部内容-->
<div class="main">
<!--中间内容部分，父容器-->
<div class="left">left</div>
<!--父容器下的子容器1-->
<div class="right">right</div>
<!--父容器下的子容器2-->
</div>
<div class="foot">foot</div>
<!--底部内容-->
</body>
你好，非常感谢你的回答。你的说法和你的写法我都明白，但是我主要就是想知道为什么我这样写无法实现与左边div的距离为10px，以及宽度自适应。完整代码是这样的：
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:200px;background:yellow;}
.main{height:600px;background:red;}
.left{width:200px;float:left;background:blue;height:600px;}
.right{height:600px;background:green;float:right;margin-right:0px;margin-left:10px;}
.foot{height:200px;background:yellow}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
你好，由于你的代码片面性，现在还是运行不出你的效果，可以帮你分析下哈：
首先，float：right这个应用在子div中浮动中是没有问题的，你应该给个宽，margin-right:0px这条代码没起作用，是条废码，可以删除的，margin-left：10px是距离左边div的距离为10px；浮动记住一个要点就是：father（父元素）这个div的宽度一定要包容也就是大于或等于两个son（子元素）的宽度，不管son两面的布局如何，padding、margin多少都行，就是不能超过father，有种写法可以写成 .father>div{float:left},代码表示father下面所有的div都进行左浮动，解释如上所述，不知道这样讲你明白没？
<div class="father">
<div class="son_first"></div>
<div class="son_second"></div>
</div>
举报
0/150
提交
取消
