CSS----实现div两列（左/右）等高

最新推荐文章于 2024-10-27 15:21:36 发布

damys

最新推荐文章于 2024-10-27 15:21:36 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5.CSS3

本文链接：https://blog.youkuaiyun.com/damys/article/details/9235147

HTML5.CSS3 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用CSS和HTML实现复杂网页布局的方法，通过浮动元素和清除浮动等技术，实现了左右两栏不同宽度的内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
 *{ margin:0; padding:0;}

.con{ overflow:hidden; width:980px;}

.con:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}

.con .l,.con.r{margin-bottom:-9999px; padding-bottom:9999px;}
.con .l{ width:660px; float:left;}

.con .r{ width:300; float:right;}

</style>

html

<div>

   <div class='con'>

         <div class='l'>llllllllllllllllllllll</div>

         <div class='r'>rrrrrrrrrrrrrrrrrrr</div>

  </div>

</div>