0
当我改变屏幕大小时，我们的元素移动并且他们的位置改变了。现在我想知道这是什么原因？在这种情况下我该怎么办？当我改变屏幕大小时的位置移动
.header{
\t width:100%;
\t height:100px;
\t background-color:green;
\t margin-bottom:50px;
\t margin-top:-10px;
}
#title{
\t color:white;
\t font-size:50px;
\t font-weight:bold;
\t float:right;
\t margin:20px;
\t padding-right:50px;
\t display:inline;
}
.ms{
\t height:50px;
\t width:15%px;
\t margin:20px;
\t display:inline;
}
#pms{
\t color:white;
\t margin:10px;
\t font-weight:bold;
\t font-size:23px;
\t margin-left:60px;
\t padding-top:3px;
}
#p{
\t color:black;
\t font-size:9px;
\t margin-left:60px;
\t margin-top:-7px;
\t font-weight:bold;
}
.box1{
\t float:right;
}
.box2{
\t float:left;
}
.img1{
\t margin-right:40px;
\t margin-bottom:30px;
\t margin-top:30px;
}
.img2{
\t margin-left:40px;
\t margin-bottom:30px;
\t margin-top:30px;
}
#t1{
\t width:50%px;
\t height:10px;
\t background-color:99FF00;
\t margin-right:30px;
\t position:absolute;
\t left:30px;
\t top:50px;
}
#first{
\t font-weight:bold;
\t font-size:40px;
\t color:99FF00;
\t margin-right:30px;
\t text-align:right;
\t margin-top:30px;
}
.tf{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:30px;
}
.pf{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
#t2{
\t width:50%px;
\t height:10px;
\t background-color:990066;
\t margin-left:30px;
\t position:absolute;
\t left:30px;
\t top:50px;
}
#second{
\t font-weight:bold;
\t font-size:40px;
\t color:990066;
\t margin-right:5px;
\t text-align:right;
\t margin-top:30px;
}
.ts{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:5px;
}
.ps{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
#t3{
\t width:50%px;
\t height:10px;
\t background-color:003399;
\t margin-right:30px;
\t margin-top:30px;
}
#third{
\t font-weight:bold;
\t font-size:40px;
\t color:003399;
\t margin-right:30px;
\t text-align:right;
\t margin-top:30px;
}
.tt{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:30px;
}
.pt{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
#t4{
\t width:50%px;
\t height:10px;
\t background-color:CC0000;
\t margin-left:30px;
\t margin-top:30px;
}
#fourth{
\t font-weight:bold;
\t font-size:40px;
\t color:CC0000;
\t margin-right:5px;
\t text-align:right;
\t margin-top:30px;
}
.tf1{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:5px;
}
.pf1{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
#t5{
\t width:50%px;
\t height:10px;
\t background-color:59955C;
\t margin-right:30px;
\t margin-top:30px;
}
#fifth{
\t font-weight:bold;
\t font-size:40px;
\t color:59955C;
\t margin-right:30px;
\t text-align:right;
\t margin-top:30px;
}
.tf2{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:30px;
}
.pf2{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
#t6{
\t width:50%px;
\t height:10px;
\t background-color:CCFF33;
\t margin-left:30px;
\t margin-top:30px;
}
#sixth{
\t font-weight:bold;
\t font-size:40px;
\t color:CCFF33;
\t margin-right:30px;
\t text-align:right;
\t margin-top:30px;
}
.ts1{
\t font-size:20px;
\t color:black;
\t font-weight:bold;
\t float:right;
\t margin-right:5px;
}
.ps1{
\t font-size:20px;
\t color:gray;
\t font-weight:bold;
\t text-align:right;
}
.footer{
\t clear:both;
\t width:100%px;
\t height:100px;
\t background-color:green;
}
#m{
\t float:right;
\t margin-top:30px;
\t color:white;
\t margin-right:40px;
}
#m1{
\t font-size:20px;
\t font-weight:bold;
}
#m2{
\t font-size:15px;
\t font-weight:bold;
}
#s{
\t float:left;
\t margin-top:30px;
\t color:white;
\t margin-left:40px;
}
#s1{
\t font-size:20px;
\t font-weight:bold;
}
#s2{
\t font-size:29;
\t font-weight:bold;
}<html>
<head>
<title>modire sabz</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="modire sabz.css">
</head>
<body>
\t <div class="header">
\t \t <div id="title">فهرست بخشی از محصولات مدیر سبز</div>
\t \t <div class="ms">
\t \t \t <p id="pms">مدیر سبز</p>
\t \t \t <p id="p">مشاورین بازاریابی نوین</p>
\t \t </div>
\t </div>
\t <div class="box1">
\t \t <div id="t1"></div>
\t \t <div id="first"> رشد کسب و کار (سطح اول) </div>
\t \t <div class="img1">
\t \t \t <img src="1.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="tf">:مخاطب</div>
\t \t <div class="pf">کارآفرینان، مدیران و صاحبان فروشگاه</div>
\t \t <div class="tf">:موضوع</div>
\t \t <div class="pf">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
\t \t <div class="tf">قیمت ویژه بسته: 49 هزار تومان</div>
\t </div>
\t <div class="box2">
\t \t <div id="t2"></div>
\t \t <div id="second">رشد و کسب و کار (سطح دوم)</div>
\t \t <div class="img2">
\t \t \t <img src="2.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="ts">:مخاطب</div>
\t \t <div class="ps">کارآفرینان، مدیران و صاحبان فروشگاه</div>
\t \t <div class="ts">:موضوع</div>
\t \t <div class="ps">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
\t \t <div class="ts">قیمت ویژه بسته: 59 هزار تومان</div> \t \t
\t </div>
\t <div class="box1">
\t \t <div id="t3"></div>
\t \t <div id="third">کسب و کار اینترنتی پیشرفته</div>
\t \t <div class="img1">
\t \t \t <img src="3.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="tt">:مخاطب</div>
\t \t <div class="pt">صاحبان و مدیران وب سایت</div>
\t \t <div class="tt">:موضوع</div>
\t \t <div class="pt">بازاریابی با ایمیل سءو، بازاریابی اینترنتی</div>
\t \t <div class="tt">قیمت ویژه بسته: 99 هزار تومان</div> \t \t
\t </div>
\t <div class="box2">
\t \t <div id="t4"></div>
\t \t <div id="fourth">فروشندگی حرفه ای</div>
\t \t <div class="img2">
\t \t \t <img src="4.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="tf1">:مخاطب</div>
\t \t <div class="pf1">فروشندگان، مدیران فروش و بازاریابان</div>
\t \t <div class="tf1">:موضوع</div>
\t \t <div class="pf1">روش های فروش، مذاکره، زبان بدن و ...</div>
\t \t <div class="tf1">قیمت ویژه بسته: 49 هزار تومان</div> \t \t
\t </div>
\t <div class="box1">
\t \t <div id="t5"></div>
\t \t <div id="fifth">چکیده 45 کتاب کسب و کار</div>
\t \t <div class="img1">
\t \t \t <img src="5.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="tf2">:مخاطب</div>
\t \t <div class="pf2">صاحبان کسب و کار و کارمندان</div>
\t \t <div class="tf2">:موضوع</div>
\t \t <div class="pf2">تمامی حوزه های بهبود فردی و کسب و کار</div>
\t \t <div class="tf2">قیمت ویژه بسته: 49 هزار تومان</div> \t \t
\t </div>
\t <div class="box2">
\t \t <div id="t6"></div>
\t \t <div id="sixth">کتابخانه موفقیت برایان تریسی</div>
\t \t <div class="img2">
\t \t \t <img src="6.jpg" height="150" width="450" />
\t \t </div>
\t \t <div class="ts1">:مخاطب</div>
\t \t <div class="ps1">مدیران و کارآفرینان</div>
\t \t <div class="ts1">:موضوع</div>
\t \t <div class="ps1">مدیریت، رهبری و بازاریابی</div>
\t \t <div class="ts1">قیمت ویژه دوره 7 جلدی: 45 هزار تومان</div> \t \t
\t </div>
\t <div class="footer">
\t \t <div id="m">
\t \t \t <div id="m1">مشاورین بازاریابی مدیر سبز</div>
\t \t \t <div id="m2">تلفن: 88308732 فکس: 89783127</div>
\t \t </div>
\t \t <div id="s">
\t \t \t <div id="s1">سایت آموزش تخصصی بازاریابی و مدیریت</div>
\t \t \t <div id="s2">www.ModireSabz.com</div>
\t \t </div>
\t </div>
</body>
</html>
您的CSS包含无效的样式规则“width：50％px;”纠正它们并尝试。也许这可能会导致问题。 – 2014-09-22 07:27:58
我这样做，但不能工作 – arezoo 2014-09-22 07:42:50
您应该将百分比中的所有宽度替换为像素，并希望能够解决您面临的问题。 – 2014-09-22 08:02:29