我正在尝试使用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>
    

10-07 19:26
查看更多