求一个css布局

huayiluo 2008-11-07 09:18:43

我想list自动适应屏幕大小！！！

在这里，我是不是应该设置list的width?如果不设置那有可能会变型！但是如果给了width那我想让list跟随屏幕大小，那不是达不到吗？？？？

现在list中的item我不确定一行有多少个item,如果屏幕大，我就给多几个，如果小，我就给少几个。但是我现在是没有指定list的width的!

希望高手指点，也许我的想法是错的，应该指定list的width来固定它。



body {

font-family:Arial, Helvetica, sans-serif;

font-size:.8em; 

color:#000000; 

margin:0 0 0 0;

padding:0 0 0 0;

background:#ffffff;

text-align:center;

}



#page_wrap {

padding:20px;

background:#ffffff;

text-align:center;

}



#header {

margin:20px auto 20px auto;

border:3px solid #CCC;

display:block;

font-size:.85em;

background:#ffffff;

text-align:center;

}

#search{

margin:0px auto 0px auto;

border:3px solid #CCC;

display:block;

font-size:.85em;

background:#ffffff;

}

#dynamic{

margin:0px auto 0px auto;

}

#login{

border:3px solid red;

width:150px;

float:left;

}



#news{

border:3px solid #ccc;

width:200px;

float:left;

}



#images{

}

#content{



clear:both;

margin:0px auto 0px auto;

text-align:center;

}

#left{

border:3px solid #ccc;

width:200px;

float:left;

}

#content #list{

border:3px solid #ccc;

float:left;



}

.item{

height:100px;

width:60px;

border:2px solid #223;

float:left;

}

#right{



float:right;

border:3px solid #ccc;

width:200px;

}

#footer{

clear:both;

}

html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>



<link href="Untitled-2.css" rel="stylesheet" type="text/css" />

</head>



<body>



<div id="page_wrap">

<div id="header">header</div>

<div id="search">search</div>

<div id="dynamic">

	<div id="login">login</div>

	<div id="news">news</div>

	<div id="images">images</div>

</div>

<div id="content">

	<div id="left">left</div>

	<div id="list">

		<div class="item">item</div>

		<div class="item">item</div>

		<div class="item">item</div>

		<div class="item">item</div>

		<div class="item">item</div>

		<div class="item">item</div>



		<div class="item">item</div>

	</div>

	<div id="right">right</div>

</div>

<div id="footer">footer</div>

</div>





</body>

</html>

...全文

105 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

eeight 2008-11-09

打赏
举报

学习。。。。。。。。。

天才在左疯子在右 2008-11-08

打赏
举报

你要插入层啊

一把编程的菜刀 2008-11-08

打赏
举报

你的不固定的？

mark620 2008-11-08

打赏
举报

[Quote=引用 2 楼 senier 的回复:]
VBScript code
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:0 0 0 0;
padding:0 0 0 0;
background:#ffffff;
text-align:center;
}

#page_wrap {
padding:20px;
background:#ffffff;
text-align:center;
}

#header {
margin:20px auto 20px auto;
border:3px solid #CCC;
display:block;
font-size…
[/Quote]

这个不错啊

szoe5203 2008-11-08

打赏
举报

可以使用百分比计算宽度啊

huayiluo 2008-11-07

打赏
举报

搞什么鸟,csdn出错了。

huayiluo 2008-11-07

打赏
举报

dddddddddd

senier 2008-11-07

打赏
举报



body   { 

font-family:Arial,   Helvetica,   sans-serif; 

font-size:.8em;   

color:#000000;   

margin:0   0   0   0; 

padding:0   0   0   0; 

background:#ffffff; 

text-align:center; 

} 



#page_wrap   { 

padding:20px; 

background:#ffffff; 

text-align:center; 

} 



#header   { 

margin:20px   auto   20px   auto; 

border:3px   solid   #CCC; 

display:block; 

font-size:.85em; 

background:#ffffff; 

text-align:center; 

} 

#search{ 

margin:0px   auto   0px   auto; 

border:3px   solid   #CCC; 

display:block; 

font-size:.85em; 

background:#ffffff; 

} 

#dynamic{ 

margin:0px   auto   0px   auto; 

} 

#login{ 

border:3px   solid   red; 

width:150px; 

float:left; 

} 



#news{ 

border:3px   solid   #ccc; 

width:200px; 

float:left; 

} 



#images{ 

} 

#content{ 



clear:both; 

margin:0px   auto   0px   auto; 

text-align:center; 

} 

#left{ 

border:3px   solid   #ccc; 

width:200px; 

float:left; 

} 

#content   #list{ 

border:3px   solid   #ccc; 

float:left; 



} 

.item{ 

height:100px; 

width:60px; 

border:2px   solid   #223; 

float:left; 

} 

#right{ 



float:right; 

border:3px   solid   #ccc; 

width:200px; 

} 

#footer{ 

clear:both; 

}

html

 

<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN "   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 

<html   xmlns= "http://www.w3.org/1999/xhtml "> 

<head> 

<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   /> 

<title> 无标题文档 </title> 



<link   href= "Untitled-2.css "   rel= "stylesheet "   type= "text/css "   /> 

</head> 



<body> 



<div   id= "page_wrap "> 

<div   id= "header "> header </div> 

<div   id= "search "> search </div> 

<div   id= "dynamic "> 

<div   id= "login "> login </div> 

<div   id= "news "> news </div> 

<div   id= "images "> images </div> 

</div> 

<div   id= "content "> 

<div   id= "left "> left </div> 

<div   id= "list "> 

<div   class= "item "> item </div> 

<div   class= "item "> item </div> 

<div   class= "item "> item </div> 

<div   class= "item "> item </div> 

<div   class= "item "> item </div> 

<div   class= "item "> item </div> 



<div   class= "item "> item </div> 

</div> 

<div   id= "right "> right </div> 

</div> 

<div   id= "footer "> footer </div> 

</div> 





</body> 

</html>