三栏布局，让中栏先显示，且要三个栏高度相同(不能用背景图平铺)！求方法解决办法
日期：2014-05-17 浏览次数：20681 次
三栏布局，让中栏先显示，且要三个栏高度相同(不能用背景图平铺)！！求方法
我只能做到先让中栏先显示，等高应该怎样实现啊？
，
------解决方案--------------------
可以实现的，在这个栏目里的迅雷面试题中最后一道题就是这个，里面有答案。
------解决方案--------------------
http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?28820
里面有问题同答案地址
------解决方案--------------------
上面所说的等高不是正真的等高，而视觉上的，用了border而以
------解决方案--------------------
------解决方案--------------------
建议楼主不要学习用JS实现等高的办法，因为这是违背脚本不控制基本布局的原则；其二上面的这些方法主要采用一个正margin一个负padding的技巧性处理，但这个是有副作用的，有点儿定时炸弹的味道，个人觉得，其实很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。
我只能做到先让中栏先显示，等高应该怎样实现啊？
，
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:0;
font-family:Arial,sans-serif;
text-align:center;
}
#container{
width:768px;
margin:0 auto;
padding:0;
}
#header{
width:100%;
height:50px;
margin:5px 0;
padding:0;
background:#CCC;
}
#content{
float:left;
width:100%;
}
#col-container{
float:left;
width:565px;
padding:0;
margin:0;
}
.main-content{
float:right;
width:362px;
background:#CCC;
}
.left-content{
float:left;
width:200px;
background:gray;
}
#right{
float:right;
width:200px;
margin-left:3px;
background:gray;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="content">
<div id="col-container">
<div class="main-content">main<br />main<br />main<br />main<br />main<br />
</div>
<div class="left-content">left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />left<br />
</div>
</div>
<div id="right">right<br />right<br />right<br />right<br /></div>
</div>
</div>
</body>
</html>
------解决方案--------------------
可以实现的，在这个栏目里的迅雷面试题中最后一道题就是这个，里面有答案。
------解决方案--------------------
http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?28820
里面有问题同答案地址
------解决方案--------------------
上面所说的等高不是正真的等高，而视觉上的，用了border而以
------解决方案--------------------
------解决方案--------------------
建议楼主不要学习用JS实现等高的办法，因为这是违背脚本不控制基本布局的原则；其二上面的这些方法主要采用一个正margin一个负padding的技巧性处理，但这个是有副作用的，有点儿定时炸弹的味道，个人觉得，其实很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
