html - 内容全宽，仅在固定高度侧边栏之后

Question

我正在尝试实现与此类似的布局:

地点:

• 每个内容 block 中都有多个元素
• 内容 block 和侧边栏高度可变
• 不使用javascript

我得到的最接近的是这个(但请注意侧边栏结束之前的文章如何占用比预期更多的空间，并且第 3 篇文章中的按钮占据了页面的 100%，而文章的其余内容占用更少) :

.page {
  width: 1000px;
  margin: auto;
}

.sidebar {
  float: right;
  width: 300px;
  height: 410px;
  background: red;
}

.content {
  padding-right: 20px;
}

article {
  background: #cdcdcd;
  padding: 15px;
  margin-bottom: 20px;
  
  h3 { margin: 0; }
}

.buttons {
  display: flex;
  justify-content: space-between;
}

<div class="page">
  <div class="sidebar"></div>
  <div class="content">
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
  </div>
</div>

如果我不清楚，请告诉我。

Answer 1

您需要为前 3 个文章 div 定义宽度。

.page {
  width: 1000px;
  margin: auto;
}

.sidebar {
  float: right;
  width: 300px;
  height: 527px;
  background: red;
}

.content {
  padding-right: 20px;
}

article {
  background: #cdcdcd;
  padding: 15px;
  margin-bottom: 20px;
  
  h3 { margin: 0; }
}

.buttons {
  display: flex;
  justify-content: space-between;
}
.small-box-content{
    width: 67%;
    display: inline-block;
}

<div class="page">
  <div class="sidebar"></div>
  <div class="content">
    <article class="small-box-content">
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article class="small-box-content">
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article class="small-box-content">
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
    <article>
      <h3>Lorem, ipsum dolor.</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
      <div class="buttons">
        <button>btn1</button>
        <button>btn2</button>
      </div>
    </article>
  </div>
</div>