同一个DIV里面有不同的DIV怎么样设置margin的值呢？
我设置了.zswz的margin-left：150PX;为什么.tupian的位置也会移动呢？像这种我需要单独设置的内层的DIV距离要怎么设置呢？
div class="zjsb">
<div class="zswz">
A WORD <br> ABOUT US
</div>
<div class="tupian">
<img src="images\bb3.jpg" alt="">
</div>
<div class="zhezhao">Praesent dignissim viverra est,sed <br> bibendum ligula congue non.Sed ac nisl <br>et felis gravida commodo?Suspendisse <br>eget ullamcorper ipsum. Suspendisse <br>diam amet.</div>
<div class="ys70000">
70000
<hr>
Students
</div>
<div class="ys600">
600
<hr>
Faculty
</div>
</div>
正在回答
您好，因为你的.zswz和.tupian都设置了float:left;。此时.tupian是处于.zswz后面的，那么当你前面的内容往右移动的时候，你后面跟着的内容也是需要向后移动的。祝学习愉快！
*{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 60px;
background-color: #07cbc9;
color: #ffffff;
}
header ul{
float: right;
width: 480px;
list-style: none;
/* position: relative; */
margin-right: 80px;
line-height: 60px;
}
header ul li{
width: 60px;
height: 60px;
margin: auto;
padding-left:20px;
float: left;
font-size: 15px;
font-weight: bold;
font-family: '微软雅黑';
}
.top{
width: 100%;
height: 100%;
margin-top: 0px;
float: left;
}
.top img{
width: 100%;
position:absolute;
z-index: -1;
}
.top ul{
float: right;
z-index: 2;
list-style: none;
margin-top: 200px;
margin-right: 700px;
line-height: 80px;
}
.top ul li input{
width: 500px;
height: 50px;
background:none;
color: #ffffff;
}
.top ul li textarea{
width: 500px;
background: none;
height: 200px;
color: #ffffff;
height: 100px;
}
h1{
text-align: center;
font-size: 30px;
color: #000000;
font-weight: bold;
}
hr{
background-color: #07cbc9;
width: 40px;
height: 3px;
border: none;
margin-left: 930px;
margin-top: 10px;
}
.sp2{
color: #797979;
font-size: 20px;
text-align: center;
}
.zjsb{
margin-top: 20px;
}
.tupian{
text-align: center;
margin-left: 0px;
margin-left: 50px;
float: right;
}
.zswz{
font:50px bold;
margin-left: 370px;
float: left;
font-family: '微软雅黑';
}
.zhezhao{
border: #07cbc9 solid;
size: 2px;
width: 400px;
height: 200px;
background-color: #ffffff;
float: left;
margin-top: 200px;
margin-left: 400px;
}
.ys70000{
float: right;
}
.ys600{
float: right;
}
<html>
<head>
<meta charset="utf-8">
<title>Career Builder</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<img src="images\logo.png" alt="">
<ul>
<li>HOME</li>
<LI>ABOUT</LI>
<LI>GAILERY</LI>
<LI>FACULTY</LI>
<LI>EVENTS</LI>
<LI>CONTACT</LI>
</ul>
</header>
<div class="top">
<img src="images\banner3.jpg" alt="">
<ul>
<li><input type="text" value="your Name"></li>
<li><input type="text" value="your Phone"></li>
<li><input type="text" value="your Email"></li>
<li><textarea name="a" >Write Your Comment Here</textarea></li>
<li><input type="submit" value="SEND MESSAGE"></li>
</ul>
</div>
<div>
<h1>ABOUT</h1>
<hr>
<div class="sp2">Lorem Ipsum is simply dummy text of the printing and typesetting <br>industry.Lorem Ipsum has been the industry's standard dummy <br>text every since the 1500s.</div>
</div>
<div class="zjsb">
<div class="zswz">
A WORD <br> ABOUT US
</div>
<div class="tupian">
<img src="images\bb3.jpg" alt="">
</div>
<div class="zhezhao">Praesent dignissim viverra est,sed <br> bibendum ligula congue non.Sed ac nisl <br>et felis gravida commodo?Suspendisse <br>eget ullamcorper ipsum. Suspendisse <br>diam amet.</div>
<div class="ys70000">
70000
<hr>
Students
</div>
<div class="ys600">
600
<hr>
Faculty
</div>
</div>
</body>
</html>
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星