CSS分列等高

最新推荐文章于 2025-05-05 00:26:50 发布

转载最新推荐文章于 2025-05-05 00:26:50 发布 · 70 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hualuoshuijia/p/7410285.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
</head>
<style type="text/css">
.content{
 margin: 0 auto;
 width: 960px;
 background-color: gray;
 zoom: 1;
}
.content:after { content: ""; display: block;  visibility: hidden; clear: both;height: 10px;background-color: blue;width: 100% ;clear: both;}
.left{
  float: left;
  height: 100%
}

.corner1{
  background-color: red;
  margin-left: 100px;
  width: 20%;
}
.corner2{
  background-color: yellow;
  width: 40%;
}
</style>
<body>
<div class="content">
   <div class="left corner1">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234
   我是好人<br/>
    我是好人2<br/></div> 


   <div class="left corner2">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234
   我是好人<br/>
    我是好人2<br/>
    我是好人<br/>
    我是好人2<br/>
   </div>
</div>
</body>
</html>

/*在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
/*这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。*/
/*这些东西的原理，就是让脱离文档流的元素回归到流当中，并且做一些浏览器的兼容*/
/*用after before的伪元素，需要给一个content但这个元素又不能被看到，所以就有了visibility: hidden; 和 height:0*/

转载于:https://www.cnblogs.com/hualuoshuijia/p/7410285.html