Rumah >hujung hadapan web >tutorial css >等高布局如何实现
等高布局如何实现
- 一个新手asal
- 2017-09-22 10:30:121383semak imbas
padding补偿法
首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。
<!DOCTYPE html>
<html>
<head>
<style>
*{margin: 0;padding: 0;}
.container{width: 600px;border: 1px solid black;overflow: hidden}
.left{float: left;width: 150px;border: 2px solid red;
padding-bottom: 2000px;margin-bottom: -2000px;}
.right{float: left;width: 400px;border: 3px solid darkblue;
padding-bottom: 2000px;margin-bottom: -2000px;}
</style>
</head>
<body>
<p class="container">
<p class="left">ger</p>
<p class="right">gr<br><br><br>rg</p>
<p style="clear:both"></p></p></body></html>实现两列布局
<!DOCTYPE html>
<html>
<head>
<style>
*{margin: 0;padding: 0;}
.container{width: 900px;border: 1px solid palevioletred;overflow: hidden;position: relative;}
.left{margin-right: 120px; border: 1px solid green;height: 300px;}
.right{float: right;width: 100px;border: 1px solid black;position: absolute; top:0;right: 0;}
img{max-width: 100px;max-height: 100px;}
</style></head><body><p class="container">
<p class="left"></p>
<p class="right"><img src="4.jpg"/>
</p>
</p>
</body>
</html>Atas ialah kandungan terperinci 等高布局如何实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS浮动写法Artikel seterusnya：如何制作一个CSS3非常炫酷的3D动画