当我改变屏幕大小时位置的移动

时间：2014-09-22 07:17:12

标签： html css

当我改变屏幕尺寸时，我们的元素会移动并且它们的位置会发生变化。现在我想知道这是什么原因？在这种情况下，我该怎么办？ 

.header{
	width:100%;
	height:100px;
	background-color:green;
	margin-bottom:50px;
	margin-top:-10px;
}
#title{
	color:white;
	font-size:50px;
	font-weight:bold;
	float:right;
	margin:20px;
	padding-right:50px;
	display:inline;
}
.ms{
	height:50px;
	width:15%px;
	margin:20px;
	display:inline;
}
#pms{
	color:white;
	margin:10px;
	font-weight:bold;
	font-size:23px;
	margin-left:60px;
	padding-top:3px;
}
#p{
	color:black;
	font-size:9px;
	margin-left:60px;
	margin-top:-7px;
	font-weight:bold;
}
.box1{
	float:right;
}
.box2{
	float:left;
}
.img1{
	margin-right:40px;
	margin-bottom:30px;
	margin-top:30px;
}
.img2{
	margin-left:40px;
	margin-bottom:30px;
	margin-top:30px;
}
#t1{
	width:50%px;
	height:10px;
	background-color:99FF00;
	margin-right:30px;
	position:absolute;
	left:30px;
	top:50px;
}
#first{
	font-weight:bold;
	font-size:40px;
	color:99FF00;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.tf{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:30px;
}
.pf{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t2{
	width:50%px;
	height:10px;
	background-color:990066;
	margin-left:30px;
	position:absolute;
	left:30px;
	top:50px;
}
#second{
	font-weight:bold;
	font-size:40px;
	color:990066;
	margin-right:5px;
	text-align:right;
	margin-top:30px;
}
.ts{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:5px;
}
.ps{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t3{
	width:50%px;
	height:10px;
	background-color:003399;
	margin-right:30px;
	margin-top:30px;
}
#third{
	font-weight:bold;
	font-size:40px;
	color:003399;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.tt{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:30px;
}
.pt{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t4{
	width:50%px;
	height:10px;
	background-color:CC0000;
	margin-left:30px;
	margin-top:30px;
}
#fourth{
	font-weight:bold;
	font-size:40px;
	color:CC0000;
	margin-right:5px;
	text-align:right;
	margin-top:30px;
}
.tf1{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:5px;
}
.pf1{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t5{
	width:50%px;
	height:10px;
	background-color:59955C;
	margin-right:30px;
	margin-top:30px;
}
#fifth{
	font-weight:bold;
	font-size:40px;
	color:59955C;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.tf2{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:30px;
}
.pf2{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t6{
	width:50%px;
	height:10px;
	background-color:CCFF33;
	margin-left:30px;
	margin-top:30px;
}
#sixth{
	font-weight:bold;
	font-size:40px;
	color:CCFF33;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.ts1{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:5px;
}
.ps1{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
.footer{
	clear:both;
	width:100%px;
	height:100px;
	background-color:green;
}
#m{
	float:right;
	margin-top:30px;
	color:white;
	margin-right:40px;
}
#m1{
	font-size:20px;
	font-weight:bold;
}
#m2{
	font-size:15px;
	font-weight:bold;
}
#s{
	float:left;
	margin-top:30px;
	color:white;
	margin-left:40px;
}
#s1{
	font-size:20px;
	font-weight:bold;
}
#s2{
	font-size:29;
	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>
	<div class="header">
		<div id="title">فهرست بخشی از محصولات مدیر سبز</div>
		<div class="ms">
			<p id="pms">مدیر سبز</p>
			<p id="p">مشاورین بازاریابی نوین</p>
		</div>
	</div>
	<div class="box1">
		<div id="t1"></div>
		<div id="first"> رشد کسب و کار (سطح اول) </div>
		<div class="img1">
			<img src="1.jpg" height="150" width="450" />
		</div>
		<div class="tf">:مخاطب</div>
		<div class="pf">کارآفرینان، مدیران و صاحبان فروشگاه</div>
		<div class="tf">:موضوع</div>
		<div class="pf">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
		<div class="tf">قیمت ویژه بسته: 49 هزار تومان</div>
	</div>
	<div class="box2">
		<div id="t2"></div>
		<div id="second">رشد و کسب و کار (سطح دوم)</div>
		<div class="img2">
			<img src="2.jpg" height="150" width="450" />
		</div>
		<div class="ts">:مخاطب</div>
		<div class="ps">کارآفرینان، مدیران و صاحبان فروشگاه</div>
		<div class="ts">:موضوع</div>
		<div class="ps">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
		<div class="ts">قیمت ویژه بسته: 59 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t3"></div>
		<div id="third">کسب و کار اینترنتی پیشرفته</div>
		<div class="img1">
			<img src="3.jpg" height="150" width="450" />
		</div>
		<div class="tt">:مخاطب</div>
		<div class="pt">صاحبان و مدیران وب سایت</div>
		<div class="tt">:موضوع</div>
		<div class="pt">بازاریابی با ایمیل سءو، بازاریابی اینترنتی</div>
		<div class="tt">قیمت ویژه بسته: 99 هزار تومان</div>		
	</div>
	<div class="box2">
		<div id="t4"></div>
		<div id="fourth">فروشندگی حرفه ای</div>
		<div class="img2">
			<img src="4.jpg" height="150" width="450" />
		</div>
		<div class="tf1">:مخاطب</div>
		<div class="pf1">فروشندگان، مدیران فروش و بازاریابان</div>
		<div class="tf1">:موضوع</div>
		<div class="pf1">روش های فروش، مذاکره، زبان بدن و ...</div>
		<div class="tf1">قیمت ویژه بسته: 49 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t5"></div>
		<div id="fifth">چکیده 45 کتاب کسب و کار</div>
		<div class="img1">
			<img src="5.jpg" height="150" width="450" />
		</div>
		<div class="tf2">:مخاطب</div>
		<div class="pf2">صاحبان کسب و کار و کارمندان</div>
		<div class="tf2">:موضوع</div>
		<div class="pf2">تمامی حوزه های بهبود فردی و کسب و کار</div>
		<div class="tf2">قیمت ویژه بسته: 49 هزار تومان</div>		
	</div>
	<div class="box2">
		<div id="t6"></div>
		<div id="sixth">کتابخانه موفقیت برایان تریسی</div>
		<div class="img2">
			<img src="6.jpg" height="150" width="450" />
		</div>
		<div class="ts1">:مخاطب</div>
		<div class="ps1">مدیران و کارآفرینان</div>
		<div class="ts1">:موضوع</div>
		<div class="ps1">مدیریت، رهبری و بازاریابی</div>
		<div class="ts1">قیمت ویژه دوره 7 جلدی: 45 هزار تومان</div>		
	</div>
	<div class="footer">
		<div id="m">
			<div id="m1">مشاورین بازاریابی مدیر سبز</div>
			<div id="m2">تلفن: 88308732  فکس: 89783127</div>
		</div>
		<div id="s">
			<div id="s1">سایت آموزش تخصصی بازاریابی و مدیریت</div>
			<div id="s2">www.ModireSabz.com</div>
		</div>
	</div>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

您可以为正文指定一个已定义的宽度，这样您就不必完成所有代码并更改为百分比。 See this fiddle

注意我是如何向主体添加宽度和0自动边距，以便它在更大的屏幕上居中。我还给出了定义宽度的方框，以便它们正确浮动。

body {
    margin: 0 auto;
    width: 960px;
}

.box1{
    float:right;
    width: 480px;
}
.box2{
    float:left;
    width: 480px;
}

答案 1 :(得分：0)

我看了一下你的工作，我的建议是将所有div标签包含在一个容器中，而不是试图将每个标签拼凑在一起。从我收集的内容来看，您希望在所有屏幕尺寸上保持相同的外观和感觉吗？

如果是这样，那么你可以像这样启动一些标记：

.header{
	width:100%;
	height:100px;
	background-color:green;
	margin-bottom:50px;
	margin-top:-10px;
}
#title{
	color:white;
	font-size:50px;
	font-weight:bold;
	float:right;
	margin:20px;
	padding-right:50px;
	display:inline;
}
#wrapper {
  width: 100%;
 
}
#wrapperbody { 
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}
.ms{
	height:50px;
	width:15%;
	margin:20px;
	display:inline;
}
#pms{
	color:white;
	margin:10px;
	font-weight:bold;
	font-size:23px;
	margin-left:60px;
	padding-top:3px;
}
#p{
	color:black;
	font-size:9px;
	margin-left:60px;
	margin-top:-7px;
	font-weight:bold;
}
.box1{
	
	min-width: 30%;
	max-width: 30%;
	display:inline-block;
	
}
.box2{
	
}
.img1{
	text-align:right;
	margin-bottom:30px;
	margin-top:30px;
}
.img2{
	text-align:right;
	margin-bottom:30px;
	margin-top:30px;
}
#t1{
	width:100%;
	height:10px;
	background-color:99FF00;
	
	
	top:50px;
}
#first{
	font-weight:bold;
	font-size:30px;
	color:99FF00;
	
	text-align:right;
	margin-top:30px;
}
.tf{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	
}
.pf{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t2{
	width:100%;
	height:10px;
	background-color:990066;
	
	
	top:50px;
}
#second{
	font-weight:bold;
	font-size: 30px;
	color:990066;
	
	text-align:right;
	margin-top:30px;
}
.ts{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:5px;
}
.ps{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t3{
	width:100%;
	height:10px;
	background-color:003399;
	
	
}
#third{
	font-weight:bold;
	font-size:30px;
	color:003399;
	
	text-align:right;
	margin-top:30px;
}
.tt{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	
}
.pt{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t4{
	width:100%;
	height:10px;
	background-color:CC0000;
	
	
}
#fourth{
	font-weight:bold;
	font-size:30px;
	color:CC0000;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.tf1{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:5px;
}
.pf1{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t5{
	width:100%;
	height:10px;
	background-color:59955C;
	margin-top:30px;
}
#fifth{
	font-weight:bold;
	font-size:30px;
	color:59955C;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.tf2{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	margin-right:30px;
}
.pf2{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
#t6{
	width:100%;
	height:10px;
	background-color:CCFF33;
	
	margin-top:30px;
}
#sixth{
	font-weight:bold;
	font-size:30px;
	color:CCFF33;
	margin-right:30px;
	text-align:right;
	margin-top:30px;
}
.ts1{
	font-size:20px;
	color:black;
	font-weight:bold;
	float:right;
	
}
.ps1{
	font-size:20px;
	color:gray;
	font-weight:bold;
	text-align:right;
}
.footer{
	clear:both;
	width:100%;
	height:100px;
	background-color:green;
}
#m{
	float:right;
	margin-top:30px;
	color:white;
	margin-right:40px;
}
#m1{
	font-size:20px;
	font-weight:bold;
}
#m2{
	font-size:15px;
	font-weight:bold;
}
#s{
	
	margin-top:30px;
	color:white;
	margin-left:40px;
}
#s1{
	font-size:20px;
	font-weight:bold;
}
#s2{
	font-size:29;
	font-weight:bold;
}
<body>
	<div class="header">
		<div id="title">فهرست بخشی از محصولات مدیر سبز</div>
		<div class="ms">
			<p id="pms">مدیر سبز</p>
			<p id="p">مشاورین بازاریابی نوین</p>
		</div>
	</div>
<div id="wrapper">
	<div id="wrapperbody">
	<div class="box1">
		<div id="t1"></div>
		<div id="first"> رشد کسب و کار (سطح اول) </div>
		<div class="img1">
			<img src="1.jpg" height="150" width="450" />
		</div>
		<div class="tf">:مخاطب</div>
		<div class="pf">کارآفرینان، مدیران و صاحبان فروشگاه</div>
		<div class="tf">:موضوع</div>
		<div class="pf">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
		<div class="tf">قیمت ویژه بسته: 49 هزار تومان</div>
	</div>
	<div class="box1">
		<div id="t2"></div>
		<div id="second">رشد و کسب و کار (سطح دوم)</div>
		<div class="img2">
			<img src="2.jpg" height="150" width="450" />
		</div>
		<div class="ts">:مخاطب</div>
		<div class="ps">کارآفرینان، مدیران و صاحبان فروشگاه</div>
		<div class="ts">:موضوع</div>
		<div class="ps">بازاریابی، تبلیغات، مدیریت و توسعه کار</div>
		<div class="ts">قیمت ویژه بسته: 59 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t3"></div>
		<div id="third">کسب و کار اینترنتی پیشرفته</div>
		<div class="img1">
			<img src="3.jpg" height="150" width="450" />
		</div>
		<div class="tt">:مخاطب</div>
		<div class="pt">صاحبان و مدیران وب سایت</div>
		<div class="tt">:موضوع</div>
		<div class="pt">بازاریابی با ایمیل سءو، بازاریابی اینترنتی</div>
		<div class="tt">قیمت ویژه بسته: 99 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t4"></div>
		<div id="fourth">فروشندگی حرفه ای</div>
		<div class="img2">
			<img src="4.jpg" height="150" width="450" />
		</div>
		<div class="tf1">:مخاطب</div>
		<div class="pf1">فروشندگان، مدیران فروش و بازاریابان</div>
		<div class="tf1">:موضوع</div>
		<div class="pf1">روش های فروش، مذاکره، زبان بدن و ...</div>
		<div class="tf1">قیمت ویژه بسته: 49 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t5"></div>
		<div id="fifth">چکیده 45 کتاب کسب و کار</div>
		<div class="img1">
			<img src="5.jpg" height="150" width="450" />
		</div>
		<div class="tf2">:مخاطب</div>
		<div class="pf2">صاحبان کسب و کار و کارمندان</div>
		<div class="tf2">:موضوع</div>
		<div class="pf2">تمامی حوزه های بهبود فردی و کسب و کار</div>
		<div class="tf2">قیمت ویژه بسته: 49 هزار تومان</div>		
	</div>
	<div class="box1">
		<div id="t6"></div>
		<div id="sixth">کتابخانه موفقیت برایان تریسی</div>
		<div class="img2">
			<img src="6.jpg" height="150" width="450" />
		</div>
		<div class="ts1">:مخاطب</div>
		<div class="ps1">مدیران و کارآفرینان</div>
		<div class="ts1">:موضوع</div>
		<div class="ps1">مدیریت، رهبری و بازاریابی</div>
		<div class="ts1">قیمت ویژه دوره 7 جلدی: 45 هزار تومان</div>		
	</div>
    </div>
    </div>
	<div class="footer">
		<div id="m">
			<div id="m1">مشاورین بازاریابی مدیر سبز</div>
			<div id="m2">تلفن: 88308732  فکس: 89783127</div>
		</div>
		<div id="s">
			<div id="s1">سایت آموزش تخصصی بازاریابی و مدیریت</div>
			<div id="s2">www.ModireSabz.com</div>
		</div>
	</div>
</body>
我很难过，因为这不是用英文写的，但是我在很大程度上是成功的。你分开的原因是因为你有一些div漂浮在右边，有些漂浮在左边，而你没有包含他们。我还修复了你的％和px错误。您不能同时渲染％和px，即（宽度：100％px;）。

希望这有助于您至少开始走上正确的轨道：）

答案 2 :(得分：0)

复制下面的代码并将其用作工具，通过更改CSS部分来获得所需的结果。如果你仍然发现你有更多的问题，我很乐意帮助你。×

＆＃13;
＆＃13; 
/* YOUR CSS */

/* This will contain all of your content */

#wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
}
/** This will keep everything contain inside
   of this div tag <div id="body"></div>
   at whatever width you choose and keep all of your 
   content center of the screen **/
#body {
	width: 990px;
	margin-left: auto;
	margin-right: auto;
}

/* LEFT SIDE CSS STARTS HERE */

/*Left Side Container */
#left_side {
	float: left;
	margin-top: 30px;
	width: 495px;
}

/* This changes the h1 tag */
#left_side h1 {
	color: #90C;
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
}

/* This changes any p tag */
#left_side p {
	color: #777;
	padding-left: 10px;
	text-align: left;
}

/* This changes the image tag */
#left_side img {
	width: 400px;
	padding-left: 10px;
}

/* RIGHT SIDE CSS STARTS HERE */
#right_side {
	float: left;
	margin-top: 30px;
	width: 495px;
}

/* This changes the h1 tag */
#right_side h1 {
	color: #06C;
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
}

/* This changes any p tag */
#right_side p {
	color: #777;
	padding-left: 10px;
	text-align: left;
}

/* This changes the image tag */
#right_side img {
	width: 400px;
	padding-left: 10px;
}
＆＃13; 
<!-- YOUR HTML MARK UP-->

<html>
<body>
<div id="wrapper"><!--This div tag will wrap all your content. Think of it as a big box-->
  
  <div id="body"><!--This div will be my body and where I want to show my content-->
    
    <!--LEFT CONTAINER STARTS HERE-->
    <div id="left_side">
      <h1>Left Side</h1>
      <p>The content I want to show on the left goes inside the div id="left_side" </p>
      <img src="http://sectorvi.com/stackoverflow/test_image_a.jpg"> 
    </div><!-- div id="left_side" ENDS HERE-->
    
    
    <!--RIGHT CONTAINER STARTS HERE--> 
    <div id="right_side">
      <h1>Right Side Side</h1>
      <p>The content I want to show on the right goes inside the div id="right_side" </p>
      <img src="http://sectorvi.com/stackoverflow/test_image_b.jpg"> 
    </div><!-- div id="right_side" ENDS HERE-->
  
  
  </div><!--div id="body" ENDS HERE--> 
</div><!--div id="wrapper" ENDS HERE-->

</body>
</html>
＆＃13;
＆＃13;
＆＃13;
如果你想知道如何让它们设置在屏幕的中心我使用margin-left：auto和margin-right：auto在我的css部分告诉页面将所有内容放在我的身体div的左右两侧。

还要注意我在左侧和右侧div中都使用了float：left。这使得div的堆栈彼此相邻。

相关问题
最新问题