css 如何使浮动div粘在顶部

41ik7eoe 于 2023-01-28 发布在其他

关注(0)|答案(3)|浏览(167)

我有3个"盒子"/div与这个类并排：

.roundedBox {
  float: left;
  background-color: aliceblue;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
}

因为中间的一个比另外两个要高得多，我希望在我们向下滚动的时候另外两个也向下，所以我想把这个code/css类添加到边上的两个：

.stickTop {
  position: sticky;
  top: 0;
}

好像没什么区别，我错过了什么？
你可以在这里看到它：https://amortizacoes.netlify.app/您需要输入一些如图所示的值才能看到它。

css

来源：https://stackoverflow.com/questions/75201644/how-to-make-a-floating-div-stick-to-the-top

3条答案

按热度按时间

hwazgwia1#

你必须在那里做一些技巧加上修复你的HTML结构-因为使用“浮动”可能会成为一个问题的响应。

1st，创建<div>作为外部容器，这将表示为您的3列框（roundedBox，results，roundedBox）的主“行”。将其命名为“container”。在您的CSS中，此容器应该具有display: flex; flex-direction: row;
第二个，在class="container"内创建另外3个<div>作为列框。每个都使用“box-item”作为类名。在第一个和第三个“roundedBox”上添加另一个类名。在CSS中，“box-item”应该具有width: 60%; position: relative;，“roundedBox”应该具有width: 20%;
第三个，在每个class="box-item"里面，会有另一个<div class="inner-box-item">。因为浮动框的技巧将从这里开始。在第一个和第三个“inner-box-item”上用“box-float”和“box-left”/“box-right”添加类名。在你的CSS中，“box-float”应该有position: fixed;。这应该在滚动页面时浮动左右框。在CSS中，将“.box-float”与“.roundedBox”一起添加，以获得20%的框宽。

请注意，每次在CSS中使用position: fixed;时，都必须声明项的宽度。
如果你想知道为什么“inner-box-item”是必要的，你可以试着把它去掉，只把.box-item改成position: fixed;，看看如果你有时间会发生什么。
请参阅下面的HTML结构和CSS，这应该更容易为您调整框在较小的设备太多。
结构：

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: row;
}
.box-item {
  width: 60%;
  padding: 20px;
  position: relative;
}
.roundedBox, .box-float {
  width: 20%;
}
.inner-box-item {
  background: pink;
  height: 1000px;
}
.box-float {
  position: fixed;
  max-height: 50vh;
}
.box-left {
  left: 20px
}
.box-right {
  right: 20px
}
p {
  margin: 0;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div class="container">
    <div class="box-item roundedBox">
      <div class="inner-box-item box-float box-left">
        <p>A</p>
      </div>
    </div>
    <div class="box-item">
      <div class="inner-box-item">
        <p>B</p>
      </div>
    </div>
    <div class="box-item roundedBox">
      <div class="inner-box-item box-float box-right">
        <p>C</p>
      </div>
    </div>
  </div>

</body>
</html>

赞(0）回复(0）举报 2023-01-28

qni6mghb2#

嘿，您可以在下面检查此方法

.grid-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: min-content 1fr min-content;
  position: relative;
}

.item-sticky {
  background: firebrick;
  padding: 1rem;
  height: 150px;
  position: sticky;
  top: 10px;
}

.item-long {
  background: orchid;
  padding: 1rem;
  height: 200vh;
}

<div class="grid-container">
  <div class="item-sticky">
    Some content
  </div>
  <div class="item-long">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, dolores.</div>
  <div class="item-sticky">Somecontent</div>
</div>

赞(0）回复(0）举报 2023-01-28

svgewumm3#

在对@Servesh Chaturvedi和@Sabrina L.的解决方案进行了一番研究（以及一点失望）之后
我想我找到了一个既能使用flex

.roundedBox {
  background-color: aliceblue;
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
}

.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sticky {
  position: sticky;
  top: 10px;
}

.item-long {
 background: orchid;
 height: 200vh;
}

<div class="grid-container">
  <div class="sticky roundedBox">Some content</div>
  <div class="roundedBox item-long ">Lorem ipsum dolor </div>
  <div class="sticky roundedBox">Somecontent</div>
</div>

赞(0）回复(0）举报 2023-01-28

我来回答

css 如何使浮动div粘在顶部

3条答案

相关问题

热门标签

最新问答