html - CSS/HTML - div 内的 div 放置不正确

Question

这是一张附加图片，为我的问题提供了一些背景信息。 http://imgur.com/bPYmAIF

我在设置 div 内的 div 样式时遇到问题。发生的情况是，当我双击该 div 中的文本时，您可以看到突出显示仅突出显示了 div 的一半。

我想做的第二件事是确保所见即所得编辑器和页眉 div 之间没有间距。

我正在使用 Django-ckeditor 作为文本编辑器。这是由 {{form}} 模板标签呈现的。 (显然我正在为这个应用程序使用 django 网络框架)。

这是我的 HTML:

<div class="hero clearfix">
<div class="title">
    <h2>{{subsection_title}}</h2>
</div>
<br>
<div class="subsection">
    <div class="subsection_header ">
        <h4 style="text-align:left">Something interesting.</h4>
    </div>
    <div class="subsection_body">
    <p>lol</p>
    </div>
</div>          

这是我的 CSS:

 .subsection {
    width:1000px;
    margin:auto;
}
.subsection_header {
    border:1px solid #ccc;
    padding-left:20px;
    padding-right:20px;
    overflow:auto;
    margin:0px;
}
.subsection_body {
    margin:0px;
}

.hero {
    width:1000px;
    margin:auto;
    text-align:center;
}

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

Answer 1

尝试这样的事情根据你的页面宽度是如何记得关闭结束标签

.

hero clearfix
{
   position:absolute;
   width:980px;
   margin-left:-490px;
   left:50%;
}

它可能对你有帮助。