0

ページ全体に div を広げて、含まれている div をオーバーフローさせるのに苦労しています。

ブートストラップ CSS ファイルのみをインポートする 23 テーマの WordPress 子テーマを使用していますが、JavaScript ファイルは使用していません (とにかく!)。

このウェブサイトのオレンジ色のセクションのような背景画像または色を追加するためだけにスタイリングを追加するために、セクションと呼ばれるこの div を使用しています。以下のリンクを参照してください。

フラット ウェブ デザイン

私が試してみました

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

しかし、position: absolute はグリッドに大混乱をもたらすようです。セクション div は正しい場所に表示されますが、次の div は「セクション」div の上にあります。

HTML5 セクション タグを認識しています。しかし、私が理解しているように、スタイリングのみに section を使用するのはベストプラクティスではなく、代わりに div を使用するのがベストプラクティスですか? ただし、セクションタグを試してみましたが、同じ問題があります。

含まれている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 に答える