Question

我的#content div和#box_left以及#box_right在里面。父div相对定位，但两个内部div都是绝对定位的。问题是当内部有更多内容时，＃box_right不想扩展它的高度。我也希望那些内部div使静态和浮动并排设置它们，但内容消失然后即使我已经设置清楚：两者都在#footer div。另一个小问题：你知道为什么菜单链接正在拉伸，当页面按屏幕分辨率缩放时，最后一个链接会转到第二行吗？

以下是我网站的链接：CLICK HERE

非常感谢任何帮助！ Thnx提前

Answer 1

如果未扩展的框的内容浮动，则需要在其后添加一个div：

<div id="content">
    <div id="box_right" style="margin-left:200px;"></div>
    <div id="box_left" style="float: left; width: 200px;"></div>
    <div style="clear:both;"></div>
</div>

Answer 2

在#box_right和#content上摆脱你的“身高：100％” - 他们没有帮助你。

相反，将#content div的min-height设置为略大于#box_right div，你应该笑。删除100％高度后，我将#content的最小高度设置为1000px（全部使用Chrome中的检查器）并正确渲染。

我也快速查看了你的javascript - 你应该将所有jQuery选择器存储为变量而不是重新查询它们 - 它会快得多。所以你的document.ready处理程序应该写得更像这样：

$(function () {
    var $content = $("#content");
    var $footer = $("#footer");

    $content.hide();
    // etc

    $("a", $footer).click(function () {
        $footer.animate({ marginTop: "none" }, 1000);
        // etc
    });

    // etc
});

希望有所帮助。

Answer 3

就个人而言，我试图在某些“主对象”上使用绝对定位。在布局行的第一个div上使用“clear：both; position：relative; float：left;”，“position：relative; float：left;”其余的人从左到右很好地对齐。使用“display：block;”在子元素上将对象维度“适合”到其中的内容。

关于对象定位的好教程：div boxes

Answer 4

使用基于浮动的布局除非你有充分的理由使用绝对值，否则你只会造成自己的问题。

更新：绝对定位元素从文档流中取出。清除将无效。 Clear仅影响您应该使用的浮动元素。或者，看看flexbox，它很棒，但有其自身的复杂性。

solved-by-flexbox

相对div内的绝对定位div不希望扩展更多内容

4 个答案: