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

时间：2022-01-16 20:28:28

When I changed the size of screen our elements move and their position get changed.now I want to know what are this reason? And in this situation what can I do?

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

.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 个解决方案

#1

0  

You could give a defined width to the body so you will not have to go through all your code and change to percentages. See this fiddle.

您可以为正文指定一个已定义的宽度,这样您就不必完成所有代码并更改为百分比。看到这个小提琴。

Notice how I added a width to the body and a margin of 0 auto so it is centered on bigger screens. I also gave the boxes defined widths so they float correctly.

注意我是如何向主体添加宽度和0自动边距,因此它以较大的屏幕为中心。我还给出了定义宽度的方框,以便它们正确浮动。

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

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

#2

0  

I took a look at your work and my suggestion would be to contain all of your div tags into a container instead of trying to piece each one together. From what I gather you are wanting to maintain the same look and feel on all screen sizes right?

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

If so then you can start up some mark up like this:

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

.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>
I had a hard time since this was not written in English but I managed for the most part.
The reason for your seperation was because you had some div's floating right and some floating left and on top of that you did not contain them. Also I fixed your % and px error. You can not render both % and px at the same time ie (width:100%px;).

Hope this helps you at least get started in the right track :)

希望这可以帮助你至少开始正确的轨道:)

#3

0  

Copy the code below and use it as a tool to get the results you want by changing the CSS portion. If you still find you have more questions I would be happy to help :)

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

/* 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;
}
<!-- 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/*/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/*/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>

If your wondering how I got them to set in the center of the screen I used margin-left:auto and margin-right:auto in my css portion to tell the page to place everything center to the left and right of my body div.

Also notice I used the float:left in both the left and right side div. This makes the div's stack next to each other.

#1

0  

You could give a defined width to the body so you will not have to go through all your code and change to percentages. See this fiddle.

您可以为正文指定一个已定义的宽度,这样您就不必完成所有代码并更改为百分比。看到这个小提琴。

Notice how I added a width to the body and a margin of 0 auto so it is centered on bigger screens. I also gave the boxes defined widths so they float correctly.

注意我是如何向主体添加宽度和0自动边距,因此它以较大的屏幕为中心。我还给出了定义宽度的方框,以便它们正确浮动。

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

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

#2

0  

I took a look at your work and my suggestion would be to contain all of your div tags into a container instead of trying to piece each one together. From what I gather you are wanting to maintain the same look and feel on all screen sizes right?

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

If so then you can start up some mark up like this:

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

.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>
I had a hard time since this was not written in English but I managed for the most part.
The reason for your seperation was because you had some div's floating right and some floating left and on top of that you did not contain them. Also I fixed your % and px error. You can not render both % and px at the same time ie (width:100%px;).

Hope this helps you at least get started in the right track :)

希望这可以帮助你至少开始正确的轨道:)

#3

0  

Copy the code below and use it as a tool to get the results you want by changing the CSS portion. If you still find you have more questions I would be happy to help :)

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

/* 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;
}
<!-- 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/*/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/*/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>

If your wondering how I got them to set in the center of the screen I used margin-left:auto and margin-right:auto in my css portion to tell the page to place everything center to the left and right of my body div.

Also notice I used the float:left in both the left and right side div. This makes the div's stack next to each other.

标签：

相关文章