Question

我很难在页面溢出包含div的div。

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

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

我试过了

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

但是位置：绝对似乎对网格造成严重破坏。部分div出现在正确的位置，但是下面的div位于“section”div的顶部。

我知道HTML5节标记。但据我了解，最好不要仅仅使用部分样式，而是使用div代替？但是我已经尝试了section标签，我遇到了同样的问题。

我希望有人可以建议我如何在页面中扩展其包含的div？这可以在没有绝对位置的情况下完成吗？

提前致谢

我的MarkUp

<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;
}

Answer 1

要实现这种布局，您不能使用单个容器，每个部分都应该有自己的.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;  
}

在页面上进行div伸展，使其包含div

1 个答案: