CSS如何定位元素仅针对y轴定位？

Question

我在div内部有一个元素(彼此相邻的2个锚点)(跨越大约1150px所以你需要向下滚动才能看到这个div的所有内容).这个锚是位置:固定在这个div的顶部,所以你向下滚动div锚将一直可见.我的问题是当你缩小浏览器窗口的宽度时,我希望第二个锚点在第一个锚点下方,因为空间用完了,但是直到浏览器窗口物理到达锚点,没有发生环绕,所以div变得越来越小两个锚相互重叠.

当我删除固定的位置时,当我调整浏览器窗口的大小时,div的宽度会按预期将一个锚点收缩到另一个下面.所以我猜我只需要固定y轴而不是x轴.

Answer 1

position属性作为整体应用于元素.你真正要求的是一种新的位置属性.

您可以将固定定位应用于包含两个锚点的元素,如果您的锚点设置为float,则它们将在需要时进行换行:

<style type="text/css">
  #fixed {
    position: fixed;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

...

<div id="fixed">
  <div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
  <p>something here...</p>
</div>