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

时间：2018-02-21 06:24:16

标签： html css

我正在尝试实现与此相似的布局：

Example layout to achieve

其中：

  • 每个内容块内部都有多个元素
  • 内容块和侧边栏高度可变
  • 不使用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>

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

2 个答案:

答案 0 :(得分：0)

您需要为前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>

答案 1 :(得分：0)

请让我知道这是你想要的只是为三篇文章添加了新的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>
相关问题
最新问题