内容全宽，仅在固定高度的边栏之后

Question

我正在尝试实现类似于以下的布局 ：

哪里：

• 每个内容块内部都有多个元素
• 内容块和侧边栏高度可变
• 不使用JavaScript

我得到的最接近的内容是（但请注意，侧边栏末端之前的文章如何比期望的占据更多的空间，而第三条文章中的按钮占据了页面的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> 

Answer 2

请让我知道这就是你想要的
刚刚为三篇文章添加了新的div类.side_left

  
 
  
  
 
   
 
    
    .page {
      width: 1000px;
      margin: auto;
    }
    .side_left{
    width:650px;
    }
    .sidebar {
      float: right;
      width: 300px;
      height: 420px;
      margin-top:20px;
      background: red;
    }

    .content {
      padding-right: 20px;
    }

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

    .buttons {
      display: flex;
      justify-content: space-between;
    }
 
    
    <div class="page">
      <div class="sidebar"></div>
      <div class="content">
 <div class="side_left">
        <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>
        <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>