三列高度一致布局实例

最新推荐文章于 2021-07-25 11:38:04 发布

iteye_4805

最新推荐文章于 2021-07-25 11:38:04 发布

阅读量241

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/iteye_4805/article/details/82206175

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

完成以下布局：
1. 三列布局，自适应整个屏幕；
2. 其中左右固定宽度，中列自适应其余宽度；
3. 无论三列内容多少，三列高度等高；
如下图所示，请写出代码。
[attach]100[/attach]
下面我跟大家一起来完成这道面试题：
1. 根据结构、表现和行为的顺序，我们先来完成结构部分——HTML代码，如下：
<body>
<div class="wrap">
  <div class="left">
    <h3>左侧边栏</h3>
<ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
  </div>
  <div class="right">
    <h3>右侧边栏</h3>
<ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
  </div>
  <div class="center">
    <h3>中间边栏</h3>
    <ul>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
<li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
   <li><a href="http://www.5myworld.com/">www.5myworld.com</a></li>
</ul>
<span style="float:right; position:relative;"> </span> 
      </div>
</div>
</body>
2. 然后再完成表现部分——CSS样式代码：
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:13px;padding:0 10px;}
a{color:#333; text-decoration:none;}
.wrap{overflow:hidden;}
.wrap ul{list-style:none;padding:0 0 0 25px;}
.left{width:240px;background:#F1f1f1;float:left; }
.left h3,.right h3,.center h3{line-height:35px;font-size:13px;padding-left:10px;}
.right{width:240px;background:#F1f1f1;float:right;}
.center{background:#e8e8e8;margin:0 10px;_float:left;/*ie6 hack*/overflow:hidden;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
</style>
完成以下步骤两部之后的效果如下：
[attach]101[/attach]
3. 现在我们只要完成最后一个问题，就是三栏登高，其解决方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。
在样式表中添加此代码：.row{margin-bottom:-10000px;padding-bottom:10000px;}，而后，将此选择器分别添加到left、right、center中，而后便完成了本题。

资料来源参看：http://elearning.5myworld.com/lesson/2010/1021/lesson_33.html

iteye_4805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列高度一致布局实例

完成以下布局：1. 三列布局，自适应整个屏幕；2. 其中左右固定宽度，中列自适应其余宽度； 3. 无论三列内容多少，三列高度等高；如下图所示，请写出代码。[attach]100[/attach]下面我跟大家一起来完成这道面试题：1. 根据结构、表现和行为的顺序，我们先来完成结构部分——HTML代码，如下：&l...
复制链接

扫一扫