Question

我正在尝试使用css创建布局。没有什么复杂的，但无法弄清楚最后一点。

我有两行，需要两个全宽。

第1行 - 具有居中且70％宽且内容更多的div

第2行 - 应该在第1行下方全宽

由于某种原因，第2行似乎位于第1行的70％部分内。

我知道这很简单，只是布局CSS的新手。

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

Answer 1

我想也许你错过了几个关闭</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>

Answer 2

一种方法是从父div“pp-post-container”中取出第二行此外，你有一些未公开的div。

</div>
  </div>

https://codepen.io/alexMacra/pen/YxajdP

需要最后div全宽

2 个答案: