在底部放置多个 html 元素而不重叠

Question

这可能是个愚蠢的问题，但我想不通。

我有一个 HTML 列，其中有多个按钮。其中一些按钮我想堆叠在顶部，而其他按钮，我想堆叠在底部。有没有一种简单的方法可以仅使用 CSS 来做到这一点？

这是我的：

* {
    box-sizing: border-box;
}

body {
    height:100vh;
    margin:0;
    font-family: 'Open Sans';
}

.grid{
    display:grid;
    grid-template-columns: max(13%, 200px) auto;
    height:100%;
}

.left-column{
    background: linear-gradient(135deg, rgb(49, 211, 211)  -10%,rgba(0, 128, 128, 1) 45%, #040040 120%);
}

.left-column button{
    display:block;
    width:100%;
    margin: .25rem auto;
    padding:.5rem;
    background:transparent;
    font-weight: bold;
    outline: none;
    text-align: left;
    font-size:1.1rem;
    color: white;
    cursor: pointer;
    transition: 0.1s;
    border: none;
}

.bottom{
    position: absolute;
    bottom:0px;
}


.right-column{
    border: 1px black solid;
}

  <!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Theta</title>
</head>

<body><div class="grid">
    <div class="left-column">
      <button class="tablinks" >Button up 1</button>
      <button class="tablinks" >Button up 2</button>
      <button class="tablinks" >Button up 3</button>


      <button class="tablinks bottom">Button down 2</button>
      <button class="tablinks bottom">Button down 1</button>
    </div>
    <div class="right-column">
      <h1> stuff goes here</h1>
    </div>
  </div>
  </body>

</html>

如果底部只有 1 个元素，您可以看到底部的绝对定位有效，但我有多个。任何想法如何让他们在那里？我已经通过计算按钮的高度解决了这个问题，然后使用 JS 循环更改每个按钮的高度，但我更喜欢 CSS/HTML 唯一的解决方案！

谢谢！

Answer 1

您可以将按钮分成两部分（如下图分为顶部按钮和 bottom-buttons div），将它们放在 left-column class 内并设置显示：柔性;到 left-column class，因为你想让它们从上到下，我设置了一个 flex direction: column;现在设置顶部和底部位置的神奇之处在于设置 justify-content: space-between;希望这篇文章能帮到你

HTML

<div class="grid">
 <div class="left-column">
  <div class="top-buttons">
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
  </div>
  <div class="bottom-buttons">
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
  </div>
 </div>
 <div class="right-column">
  <h1> stuff goes here</h1>
 </div>

CSS

 * {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  font-family: 'Open Sans';
}

.grid {
  display: grid;
  grid-template-columns: max(13%, 200px) auto;
  height: 100%;
}

.left-column {
  background: linear-gradient(135deg, rgb(49, 211, 211) -10%, rgba(0, 128, 128, 1) 45%, #040040 120%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left-column button {
  display: block;
  width: 100%;
  margin: 0.25rem auto;
  padding: 0.5rem;
  background: transparent;
  font-weight: bold;
  outline: none;
  text-align: left;
  font-size: 1.1rem;
  color: white;
  cursor: pointer;
  transition: 0.1s;
  border: none;
}

.right-column {
  border: 1px black solid;
}

在底部放置多个 html 元素而不重叠

position multiple html elements at the bottom without overlap

html

css

position