等高布局

最新推荐文章于 2022-06-14 08:14:39 发布

SunshinePengChao

最新推荐文章于 2022-06-14 08:14:39 发布

阅读量428

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/SunshinePengChao/article/details/44205859

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
/*.bottom 用于遮挡元素下面的部分，和背景用相同的颜色时，让人看起来像是.box的padding-bottom（即：底部有空位）*/
.bottom{
bottom:0px;
float:left;
/*.box底部想与外面包含容器留出来的空白的高度*/
height:20px;
/*需要定位到.box的最下面*/
position:absolute;
/*.box的padding-left值的相反数*/
margin-left:-15px;
/*.box的width+padding*/
width:280px;
background:blue;
}
.box{
width:250px;
padding:15px;
/*原来盒子想设置的padding-bottom = 现在的（margin-bottom - margin-bottom - .bottom的height*/
padding-bottom:360px;
margin-bottom:-300px;
margin-left:20px;
float:left;
display:inline;
background:yellow;
}
.clear{
  clear:left;
}
.wrapper{
  background:blue;
  border:1px solid;
  position:relative;
  width:100%;
  overflow:hidden;
}
  </style>
  </head>
 <body>

<div class = "wrapper">

  <div class = "box">
    <p>dsfjaljfkjaskldfjl
	kdsjfkljdslkfjlksdja
	fsadkfdsjhfkjhdkjshfkjhsdk
	jkhfsakjhskjdhfkjhkds
	jsdkhafjkhkjsahfjkhjksd 
	hdsjfhksjdhakjh sjdfhkjsjhjkfh fksdahfjk
	fsjafkhkajsdhfjkhsdjk</p>
    <div class = "bottom"></div>
  </div>

  <div class = "box">
  <p>dsfjaljfkjaskldfjl
	kdsjfkljdslkfjlksdja
	fsadkfdsjhfkjhdkjshfkjhsdk
	jkhfsakjhskjdhfkjhkds
	jsdkhafjkhkjsahfjkhjksd k</p>
    <div class = "bottom"></div>
  </div>

  <div class = "box">
  <p>dsfjaljfkjaskldfjl
	kdsjfkljdslkfjlksdja</p>
    <div class = "bottom"></div>
  </div>
<br class = "clear"/>
</div>

 </body>
</html>