0

我很难让一个 div 在页面上伸展，溢出其包含的 div。

我正在使用 WordPress 子主题的二十三个主题仅导入引导 CSS 文件，没有 JavaScript 文件（无论如何！）。

我正在使用这个名为部分的 div 来添加样式，只是为了添加背景图像或颜色，如本网站橙色部分，请参见下面的链接：

平面网页设计

我努力了

position: absolute; 
left: 0; 
right: 0;

但是 position: absolute 似乎对网格造成了严重破坏。section div 出现在正确的位置，但是以下 div 位于“section”div 的顶部。

我知道 HTML5 部分标签。但据我了解，仅使用部分进行样式设置不是最佳做法，而是使用 div 代替？但是我已经尝试了 section 标签，我也遇到了同样的问题。

我希望有人能建议我如何让一个 div 在页面上伸展，使其包含 div 溢出？这可以在没有绝对位置的情况下完成吗？

提前致谢

我的标记

<div id="content" class="site-content" role="main">
<div class="entry-content">
<div class="container">
<div class="section">
                <div class="row">
                <div class="col-md-4">
                    <?php the_field('title'); ?>
                </div>
                <div class="col-md-4">
                    <?php the_field('content'); ?>
                </div>
                <div class="col-md-4">
                    <?php the_field('image-item'); ?>
                </div>
                </div>
</div>
</div>
</div>
</div>

我的 CSS

.entry-header,
.entry-content,
.entry-summary,
.entry-meta{
margin: 0 auto;
max-width: 1150px;
width: 95%;

}

.section{
background:#e8e5ce;  
position:absolute;
left:0;
right:0;
}
4

1 回答 1

2

要实现这种布局，您不能使用单个容器，每个部分都应该有自己的.container元素，这样该部分覆盖了窗口的宽度，但内容居中：

HTML

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <?php the_field( 'title'); ?>
            </div>
            <div class="col-md-4">
                <?php the_field( 'content'); ?>
            </div>
            <div class="col-md-4">
                <?php the_field( 'image-item'); ?>
            </div>
        </div>
    </div>
</div>

CSS

.section{
    background-color:#e8e5ce;  
}
于 2013-10-13T21:06:09.000 回答