Question

所以我有这种结构：

<!-- 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中。

正如您所看到的，页脚完全不合适。

Answer 1

在HTML网页上使用大量<div class="clear"></div>并不是一个好主意。以下是如何强制元素自我清除的示例：

.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; }

注意：将class="clearfix"应用于父元素。

Answer 2

试试这个

<!-- 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

在div内部漂浮的2个div。其中2个div漂浮在另一个div-height问题中

2 个答案: