左右两栏等高实现方法
等高布局在实际的应用中会常常用到。最多见的是左边的内容不少。而右边的内容却不多。为了避免让右边出现太多的空白，有时须要让右边的高度和左边的保持一致。实现的方法有不少，之前通常是用背景填充来模拟。虽然很简单，但毕境麻烦。如今有了个更简单的方法。这个方法的原理是事先经过正内边距来使其拥有足够高度，而后经过负外边距来使得其的位置不变。经过给父元素溢出隐藏，咱们能够隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。javascript
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
body { margin: 0; padding: 0; font:14px/1.6em Arial, Helvetica, 宋体,sans-serif; text-align: cnter;}
.main { width: 800px; margin: 0 auto; margin-top: 20px; color: #FFF; overflow: hidden;}
.left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px;}
.right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px; }
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>我很高</p>
<p>我也很高</p>
<p>我很是高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我很是高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我很是高</p>
<p>我就是很高</p>
<p>我很高</p>
<p>我也很高</p>
<p>我很是高</p>
<p>我就是很高</p>
</div>
<div class="right">
<p>我会和左边同样高吗？</p>
<p>我和左边同样高哦！</p>
</div>
</div>
</body>
</html>
这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就好了。这样无论是左边仍是右边高，两边的高度始终都是同样的。利用这个原理，咱们还能够实现三列多列等高布局。css
原文连接：http://leotheme.cn/javascript/css-to-realize-accordant.htmlhtml
相关文章
- 1. 左右两栏布局
- 2. div+css实现的左右两个等高div
- 3. 七种实现左侧固定，右侧自适应两栏布局的方法
- 4. SwiftUI macOS教程之 左中右三栏实现方法
- 5. 饿了么首页实现左右两栏联动。
- 6. 左右两栏div布局，高度自适应
- 7. 【Mysql左右值】左右值法实现Mysql无限级分类
- 8. css实用技巧：巧用css实现两栏等高布局
- 9. css实现两栏布局，左侧固定宽，右侧自适应的7中方法
- 10. 两种方法实现左右两栏固定，中间栏自适应布局且中间栏优先加载。1.CSS3 calc函数+position+float 2.
- 更多相关文章...
- • 现实生活中的 XML - XML 教程
- • Hibernate实现增删改查 - Hibernate教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
