Question

我在主标签中包含一个section标签和aside标签，并分别使用向左和向右浮动，现在我要放在一边使float:right保持粘性。
有什么办法可以使粘性标签保持粘性吗？
当我使用flexbox时，我实际上可以做到，但是使用float时有办法吗？

<main>
    <section></section>
    <aside></aside>
</main>

CSS：

section {
    float:left;
}

aside {
    float:right;
    position: sticky;
    top:0;
}

Answer 1

使用弹性布局

main{
  display: flex;
  justify-content: space-between;
  width:100%;
  height:999px/*for scrolling*/
}

section{
  width: 75%;
  border:1px solid black;
}

aside{
  flex-basis: 24%;
  margin-bottom: 1.6%;
}

.aside-inner{
  position: sticky;
  top: 0;
  border:1px solid black;
  height:3rem
}

<main>
  <section>Main content</section>
  <aside>
    <div class="aside-inner">Sidebar content</div>
  </aside>
</main>

粘性不适用于float元素CSS

1 个答案: