為什么右邊這樣寫達不到效果
為什么右邊這樣寫達不到效果呢.right{height:600px;background:green;float:right;margin-right:0px;margin-left:10px;}
3 回答
舉報
0/150
提交
取消
為什么右邊這樣寫達不到效果呢.right{height:600px;background:green;float:right;margin-right:0px;margin-left:10px;}
2018-03-05
舉報
2018-03-06
<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>
2018-03-05
你好，非常感謝你的回答。你的說法和你的寫法我都明白，但是我主要就是想知道為什么我這樣寫無法實現與左邊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>
2018-03-05
你好，由于你的代碼片面性，現在還是運行不出你的效果，可以幫你分析下哈：
首先，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>