利用css实现两列等高的方法

绝地灬酷狼 2022-07-28 04:13 156阅读 0赞

1:利用负边距

.container\{  
       width:980px  
       background: pink;

overflow:hidden;

/\*清楚浮动\*/

.clearfloat\{  
                zoom:1;  
        \}  
        .clearfloat:after\{  
                display:block;  
                clear:both;  
                 content:"";  
                 height: 0;  
                 line-height: 0;  
                 visibility: hidden;  
        \}

/\*清楚浮动\*/  
        .mainbox\{  
                width:650px;  
                float:left;  
                background: red;

margin-bottom:-9999px;

padding-bottom:9999px;

\}  
        .sidebox\{  
                  width:280px;  
                  float: right;  
                  background: green;

margin-bottom:-9999px;

padding-bottom:9999px;

</style>

2：利用背景图片在Y方向重复

.container\{  
       width:980px  
       background: url(images/a.png) repeat-y 0 0;

/\*清楚浮动\*/

.clearfloat\{  
        zoom:1;  
        \}  
        .clearfloat:after\{  
        display:block;  
        clear:both;  
        content:"";  
        height: 0;  
        line-height: 0;  
        visibility: hidden;  
        \}

/\*清楚浮动\*/  
        .mainbox\{  
        width:650px;  
        float:left;

\}  
        .sidebox\{  
          width:280px;  
          float: right;

</style>

3：利用边框模拟（定位元素的高度不能大于非定位元素的高度）

.container\{  
       width:980px;

positin:relative;

/\*清楚浮动\*/

.clearfloat\{  
                zoom:1;  
        \}  
        .clearfloat:after\{  
                 display:block;  
                 clear:both;  
                 content:"";  
                 height: 0;  
                 line-height: 0;  
                 visibility: hidden;  
          \}

/\*清楚浮动\*/  
        .mainbox\{  
                width:650px;  
                float:left;  
                background: red;

border-right:280px solid green;

\}  
        .sidebox\{  
                 width:280px;

position:absolute;

top:0;

right:0;

</style>

div class="container clearfloat">  
    <div class="mainbox">主要</div>  
    <div class="sidebox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏</div>  
    </div>