等高布局（一）

某公司上级考试题，当时做的时候，思想很简单，不过想了半天还是做出来了。回家以后，由于不敢心就这解出来了而奋力研究。还算研究的比较透彻，下面就是我的研究结果，分享给大家，希望能对大家有所帮助。

题目是，最外面300的宽度，头部和底部高度都是100，中间左中右三部分宽度是100。边框是5像素宽的黑色。左中右三部分的高度为三个中最高的。(如下图)

 

 

 

题目考点：

1、标准的布局的写法

2、边框的宽度和实际元素宽度的关系

3、怎么让英文文本换行

4、左中右三部分的高度为三个中最高的

        题目分析及代码：

 

1、标准布局(HTML代码)

<div class="all">
	<div class="header">头部</div>
	<div id="oDiv" class="clear">
		<div>左</div>
		<div>中</div>
		<div class="aDiv">右</div>
	</div>
	<div class="footer">底部</div>
</div>

 

2、边框的宽度和实际元素宽度的关系。由于中间三个元素左中右，只有右边没有边框，其他两个都有边框。那么写样式的时候，左中两个元素的宽度是要设定的宽度(100px)减去边框的宽度(5px)，即95px。右边由于没有边框所以宽度为100。若是在怪异模式，那么宽度和右边一样都是100px，而边框则自动算到其中。那么什么是怪异模式呢?没有文档头()就是就是怪异模式了。

3、一开始没想到会考这个。之所以加上这个是因为在最后考官在测试的时候是用英文测试这个的，输入很多英文之后，并没有自动换行。只需要加上代码word-wrap:break-word;即可。word-wrap属性是CSS3中新添加的，意思是允许长单词换行到下一行：这个属性是支持IE6的。

4、我觉得这个问题才是这个题目中最闪亮的考点，也是我认为这个题目中相对比较难的一个考点。一开始以为左中右的高度是固定的，其他高度要和这个高度一样的等高布局呢。后来才发现我理解错了，并不是登高布局。而是高度自适应最高的那个元素的高。于是乎瞬间想到了用JavaScript来做。最简单最快速的那必须是JQ，其次是原生JS了。思路有很多我暂时想到两个。第一个是获取左中右父级的高度，然后设置到这三个元素上。第二个是获取所有左中右的高度，比较大小，将最大的高度赋值给左中右三个元素。(代码如下)

 

CSS代码：

.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
.all {width:300px;border:5px solid #000;}
.header,.footer {height:100px;display:block;}
.header {border-bottom:5px solid #000;}
.footer {border-top:5px solid #000;}
.clear div {width:95px;float:left;background:red;border-right:5px solid #000;word-wrap:break-word;}
.clear .aDiv {width:100px;border:none;}

 

JavaScript（jQuery）代码：

 

          方法一：

$(function  () {
       $("#oDiv div").css({height : $("#oDiv").height()});
};

 

          方法二：

window.onload = function  () {
	var oDiv = document.getElementById("oDiv");
	var oDivSection = oDiv.getElementsByTagName("div");
	var oArr = [];
	
	for (var i=0; i<oDivSection.length; i++) {
		oArr[i] = oDivSection[i].clientHeight;
	}
	
	oArr.sort(function(a,b){return b-a;});
	for (var i=0; i<oDivSection.length; i++) {
		oDivSection[i].style.height= oArr[0] + 'px';
	}
};

 

以上便是我为大家分享的今天面试的全部内容了，上面有解答的答案也有思路更有考点。上述内容都是我个人观点哟，你若有想说的就在下面留言吧，期待与你的交流哟。