0

所以我有这种结构：

<!-- Mind Wrap  -->
<div class="mid-wrap">

<!-- Content Wrap  -->
<div class="content-wrap">
    <div class="left-sidebar"></div>
    <div class="main-article"> </div>
    <div class="clear"></div>
</div>

<!-- Right siebar -->
<div class="right-sidebar"></div>
<div class="clear"></div>

</div>

我的CSS如下：

    .mid-wrap {
    width:700px;
    height:auto;
    }

    .content-wrap {
    width:500px;
    float:left;
    position:relative;
    height:auto;
    }

    .right-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .left-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .main-article {
    width:300px;
    float:left;
    position:relative;
    height:auto;
    }
.clear {
clear:both;
}

现在，当 div "main-article" 内的内容比右侧边栏长时，高度不会自动调整。相反，有一个巨大的溢出覆盖了我的页脚。对于这种“嵌套”浮动元素，是否需要遵循一些协议。还是我用clear:both;错了方法？

提前致谢

- - - 更新 - - - -

好的，这是我的页面链接： http ://www.currentconservation.org/new/?q=featured

它在drupal上，所以有些人可能会觉得浏览所有的html很烦人。但是该页面基本上具有与我提到的相同的结构，在各自的 div 内有其他嵌套的 div。

如您所见，页脚完全不合适。

4

2 回答 2

0

It's not a good idea to use a lot of <div class="clear"></div> on your HTML pages. Here is an example on how to force an element to self-clear :

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Notice: Apply a class="clearfix" to the parent element.

于 2013-07-30T10:48:19.773 回答
0

尝试这个 

<!-- Mind Wrap  -->
    <div class="mid-wrap">

    <!-- Content Wrap  -->
    <div class="content-wrap">
        <div class="left-sidebar"></div>
        <div class="main-article"> </div>
       <!-- Right sidebar -->
    <div class="right-sidebar"></div>
    </div> 
    </div>
<div class="clear"></div>

将清除 div 放在页脚上方

于 2013-07-30T11:18:04.083 回答