Heim > Web-Frontend > HTML-Tutorial > 求一个简单的CSS布局_html/css_WEB-ITnose

求一个简单的CSS布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:40:28
Original
991 Leute haben es durchsucht

页面布局情况如下:
上(50px)  下 (左 20%  右)
要求:
布局自适应屏幕


在线等。。。
另求HTML+CSS高手

回复讨论(解决方案)


      
      
            
            
      

<!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=utf-8" /><title>layout</title><style type="text/css">	.container {		width: 100%;		min-height: 500px;	}	.row {		width: 100%;		overflow: hidden;	}		.col {		float:left;	}		.header {		height: 50px;		width: 100%;		background-color:#666666;	}		.menu {		width: 20%;		background-color: #999999;		height: 200px;	}		.content {		width: 80%;		background-color: #CCCCCC;		height: 200px;	}	</style></head><body>	<div class="container">    	<div class="row">        	<div class="col header"></div>        </div>        <div class="row">        	<div class="col menu"></div>            <div class="col content"></div>        </div>    </div></body></html>
Nach dem Login kopieren








感觉在外面套一层div更好点。

/*style css*/








2楼的朋友
min-height: 500px;
.menu {
height: 200px;
.content {
height: 200px;
这几个值能都不写死吗???让其自适应浏览器,谢谢!

1楼的朋友,
我是想要一个DIV+css的布局,那个frameSet已经太古老了。。但是仍旧谢谢你!

<style type="text/css">	.header{height:50px;background:green}	.left{float:left;width:20%;background:yellow}	.right{float:right;width:80%;background:red}	.clear{clear:both;height:0;font-size:0;}</style><div class="header">TOP</div><div class="container">	<div class="left">LEFT</div>	<div class="right">RIGHT</div>	<div class="clear"></div></div>
Nach dem Login kopieren

2楼的朋友
min-height: 500px;
.menu {
        height: 200px;
 .content {
        height: 200px;
这几个值能都不写死吗???让其自适应浏览器,谢谢!

当然可以不写死,不写高度,没内容,就看不出效果,我就是为了能看出效果。
一般都不写死,让内容来撑。

引用 5 楼 wanghantong 的回复:2楼的朋友
min-height: 500px;
.menu {
        height: 200px;
 .content {
        height: 200px;
这几个值能都不写死吗???让其自适应浏览器,谢谢!

当然可以不写死,不写高度,没内容,就看不出效果,我就是为了能看出效果。
一……

在火狐写,不写内容也是可以撑开的,我是想在IE下也实现那种效果。
举个例子,就像我们这个发帖的时候,每层楼发帖人的头像,所在的位置的背景色,是随着你帖子内容变化而变化的。你内容高度变高,即使你头像,不能充满整个div,但是背景色也是充满整个div的。您这个如果自动靠内容填充的话,你这个实现的效果应该是,在你头像--等级--下面就没有背景色了,不知道您懂我的意思没。

在火狐写,不写内容也是可以撑开的,我是想在IE下也实现那种效果。
举个例子,就像我们这个发帖的时候,每层楼发帖人的头像,所在的位置的背景色,是随着你帖子内容变化而变化的。你内容高度变高,即使你头像,不能充满整个div,但是背景色也是充满整个div的。您这个如果自动靠内容填充的话,你这个实现的效果应该是,在你头像--等级--下面就没有背景色了,不知道您懂我的意思没。

div没有内容,不设高度,不管是火狐或者是IE,高度都是0,看不见的。

论坛之头像之所以适应内容高度,是因为它不是用的div,而是td,在同一行的td都是一样高的。

如果想要div实现这种效果,就把昨天的高度设置成100%,这样,右边用内容撑开,左边适应右边的高度。
当然,如果你不用div,用td的话,就不用设高度,左边就是适应右边高度的。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage