突破固定宽度的父div

Question

我试图突破#content div以获得全宽。高度不是问题，我想因为它没有设置在这里。在这种情况下，是否可以将子div从父div中分离出来。我尝试过宽度大于1370像素，宽度也是100％。

div.container {
            width: 1370px;
        }

        ##content {
            width: 1370px;
        }

        ##header,
        ##footer-cnt div.container {
            padding-left: 200px;
        }

        ##footer-cnt div.container {
            width: 1168px;
        }

        body {
            background: ##eeeeee;
        }

Answer 1

首先，##不是css的事情。如果您尝试使用id选择器引用元素，则需要使用单个#。

有几种方法可以让人觉得孩子与父母分手了。每个都有自己的用例，具体取决于你需要做什么。

方式1：关闭父母，做孩子，重新开放父母

当您在文本编辑器或其他无法控制父级的环境中时，这是一个很好的小黑客。你会做这样的事情：

</div><!-- close parent -->
<div class="child"> Child content
<div class="parent">

方式2：使用css

的绝对/固定定位

这适用于某些用例，并且给出了外观，即孩子在父母之外，尽管就DOM而言，它仍在那里。

方式3：使用javascript

一个简单的jQuery脚本可以从父级中删除子级。给出：

<div class="parent">
    <div class="child"> Child stuff </div>
</div>

你可以这样做：

jQuery(function($){
    var child = $('.child').detach();
    $('.parent').after(child);
});

将孩子带出父母并在DOM中的兄弟位置之后移动到它之后。