Question

我的jQuery DIV有点问题。我有一个名为'allcontent'的DIV，其中包含所有HTML和内部，我有一个'headlinesarea'DIV，其中包含网站的所有标题和'datacontentarea'DIV，其中包含所有的灯具/表格等等。右手边，它也是一个漂浮在右边的DIV，写在'headlinesarea'DIV之前，因为它必须漂浮。

'allcontent'DIV包含一个带有repeat-y的透明背景图像，这样当添加更多内容时，图像将继续向下重复，并且与'headlinesarea DIV'一起正常工作，但是当我添加一个jQuery DIV时有联赛表可以打开和崩溃'allcontent'DIV将无法延伸，jQuery DIV最终重叠'allcontent'DIV的背景图像。

我网站的链接是http://thefootballleague.clanteam.com/，在这里你可以看到我的可折叠jQuery DIVS，它们是冠军联赛，联赛1和联赛2.当他们被点击时他们打开很好但不幸的是他们没有延伸'allcontent 'DIV背景。

任何想法的人？

Answer 1

添加样式：

#allcontent {
    overflow: hidden;
}

Answer 2

添加

<div style="clear:both"></div>

位于“allcontent”的底部

像这样：

<div id="allcontent">

<div id="header"></div>
<div id="nav">
...
</div>
<div id="datacontentarea">
...
</div>
<div id="headlinesarea">
...
</div>
<div style="clear:both"></div>//add this
</div>

或制作

<div class="clear"></div>

然后添加

.clear{
    clear:both;
}

样式表上的

Answer 3

更合适的是，你需要的是clearfix：

http://www.webtoolkit.info/css-clearfix.html

因为您的datacontentarea div是向右浮动的，所以您需要清除浮动，以便正确调整allcontent div的大小。

当你复制了clearfix css后，只需将“clearfix”类应用于“allcontent”div。

这是处理这些类型浮动问题的最简洁方法。

jQuery DIV重叠背景DIV

3 个答案: