左右兩欄等高實現方法
等高佈局在實際的應用中會常常用到。最多見的是左邊的內容不少。而右邊的內容卻不多。爲了避免讓右邊出現太多的空白，有時須要讓右邊的高度和左邊的保持一致。實現的方法有不少，之前通常是用背景填充來模擬。雖然很簡單，但畢境麻煩。如今有了個更簡單的方法。這個方法的原理是事先經過正內邊距來使其擁有足夠高度，而後經過負外邊距來使得其的位置不變。經過給父元素溢出隱藏，咱們能夠隱藏掉事先佔據的足夠高的空間。由兩列實際的內容高度來決定整個父元素的高度，從而實現了等高。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 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
