今天面试遇到一个布局,要求一定要纯css还要考虑兼容,有没有大神能做出来的?

linzhifen5 发布于 12/06 16:51
阅读 317
收藏 1

加载中
0
tcxu
tcxu
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS LAYOUT</title>
<style>
table{
	width: 100%;
	height: 100%;
}
td{
	background-color:#0F0;
	text-align:center;
}
#top{
	height:50px;
}
#left{
	width:20px;
}
#middle{
	border:thin;
}
#bottom{
	height:30px;
}
</style>
</head>
<body>
<table><tr>
<td  colspan="2" id="top">高度50px,宽度自适应</td></tr>
<tr><td id="left" >宽度20px 高度自适应</td><td id="middle">宽度高度都自适应</td></tr>
<tr><td colspan="2" id="bottom" >高度30px,宽度自适应</td></tr></table>
</body>
</html>

至于 使用  `div + css` 的途径:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS LAYOUT</title>
<style>
div{
	border:groove;
	border-width:3px;
	background-color:#0F0;
	margin:2px;
	
}
#top{
	width:100%;
	height:50px;
}
#left{
	float:left;
	width:20px;
}
#middle{
}

#bottom{
	clear:both;
	height:30px;
}
</style>
</head>
<body>
<div id="top">高度50px,宽度自适应</div>
<div id="left" >宽度20 px 高度自适应</div>
<div id="middle"> <br><br><br><br>宽度高度都自适应 <br><br><br><br><br></div>
<div id="bottom" >高度30px,宽度自适应</div>
</body>
</html>

 

 

可参考:

DIV自适应高度和宽度

改进一下更好。改进的内容为:

  1. 用宽度 width 为 100% 的 <div id=""wrap">将中间两块 <div> 包起来。
  2. 将 "宽度高度都自适应的" <div> 元素 左右边距都设成 0。:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仅用 CSS  宽度、高度 自适应 </title>
<style>
#top{
	width:100%;
	height:50px;
	background-color:#0F0;
}
#wrap{
	width:100%;
}
#left{
	float:left;
	width:20px;
	background-color:#C60;
}
#middle{
	right:0;
	left:0;
	background-color:#FF0;
}
#bottom{
	clear:both;
	height:30px;
	background-color:#0FF;
}
</style>
</head>
<body>
<div id="top">高度50px,宽度自适应</div>
<div id="rwaper"></div>
<div id="left" >宽度20 px 高度自适应</div>
<div id="middle"> <br><br><br><br>宽度高度都自适应 <br><br><br><br><br></div>
</div>
<div id="bottom" >高度30px,宽度自适应</div>
</body>
</html>

 

0
张亦俊
张亦俊

这个不复杂吧,float也行,table也行

0
gammey
gammey

bootstrap抄一抄

0
cyper
cyper

楼上 现在已经没人用table做布局了, 不要误导初学者, 用table做布局还是10几年前的做法. `div + css` OK? 

比如你看看开源中国首页 右键 查看源文件, 找不到table标签拉. 另外随便打开一个正常点的网站 应该也找不到table标签了, table标签只是用于以表格的形式展示数据

0
oneshow
oneshow
box-sizing:border-box;

这个属性是css3的。但是ie很早就支持。

以现在的浏览器:基本可以说没问题的。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

0
linzhifen5
linzhifen5

最开始我也觉得很简单但是回来一试我就发现不是那么简单,其他的都很简单,就是我们没法获取height,用css2基本就歇菜了。用css3的calc,就能实习,只是这个熟悉一个不足就是兼容性不是很好,刚刚看了回答,其实最好用的的还是土办法,table,这个可以实现,而且兼容没有任何问题,估计就是考css3的知识吧。

返回顶部
顶部