我正在尝试使用CSS创建布局。没什么复杂的,但找不到最后一点。
我有两行,都需要全宽。
第1行-div居中且宽度为70%,且包含更多内容
第2列-应该在第1列的下方显示完整宽度
由于某些原因,第2行似乎位于第1行的70%部分内。
我知道这很简单,只是布局CSS的新手。
代码笔:https://codepen.io/gcollins/pen/eEMKqR
HTML:
<div id="pp-post-container-{post_id}" class="pp-post-container">
<!-- Row 1 -->
<div id="pp-post-main-{post_id}" class="pp-post-main">
<div id="pp-post-content-{post_id}" class="pp-post-content">
<div id="pp-post-video-{post_id}" class="pp-post-video"></div>
<div id="pp-post-left-{post_id}" class="pp-post-left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="pp-post-right-{post_id}" class="pp-post-right">
<div></div>
<div></div>
</div>
<div>
</div>
<!-- Row #2 -->
<div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
<div>
CSS:
.pp-post-container {
background-color: yellow;
overflow: hidden
}
.pp-post-main {
margin: 0px;
padding: 0px;
height: 300px;
background-color:#EAEAEA;
}
.pp-post-content {
width: 70%;
margin: auto;
height: 300px;
background-color: red;
}
.pp-post-video {
background-color: #000;
height: 100px;
}
.pp-post-left, .pp-post-right {
background-color:pink;
display: inline-block;
margin: 0px;
height: 100px;
width: 49.8%;
}
.pp-post-testimonials {
background-color: green;
height: 100px;
}
最佳答案
我认为您可能缺少几个关闭的</div>
标记,导致正在讨论的<div>
继承其容器的CSS。
<div id="pp-post-container-{post_id}" class="pp-post-container">
<!-- Row 1 -->
<div id="pp-post-main-{post_id}" class="pp-post-main">
<div id="pp-post-content-{post_id}" class="pp-post-content">
<div id="pp-post-video-{post_id}" class="pp-post-video"></div>
<div id="pp-post-left-{post_id}" class="pp-post-left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="pp-post-right-{post_id}" class="pp-post-right">
<div></div>
<div></div>
</div>
<div>
</div>
</div>
</div>
</div>
<!-- Row #2 -->
<div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
<div>