html - 有没有办法通过相对定位将元素放在其父元素的底部

Question

我找不到将子元素定位到其父元素右下角的理想解决方案。

https://jsfiddle.net/oq4hycdt/1/

HTML

#border {
  border: 5px solid #101010;
  background-color: white;
  position: relative;
  margin: auto;
  width: 700px;
  padding: 0px 15px 0px 15px;
}

.block {
  position: relative;
  border: 1px solid black;
  border-style: none none solid none;
  padding: 0px 0px 10px 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.stuff {
  border: 2px solid black;
  position: relative;
  margin: 0% 0% 0% 0%;
  float: right;
  right: 10px;
  bottom: 0;
  line-height: 0;
}

form {
  margin: 0% 0% 5px 0%;
  border: 2px solid black;
  float: left;
}

<div id="border">

  <div class="block">
    <h3>header1</h3>
    <form>
      <input name="A" type="radio">1<br>
      <input name="A" type="radio">2<br>
      <input name="A" type="radio">3
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

  <div class="block">
    <h3>header2</h3>
    <form>
      <input name="B" type="radio">1<br>
      <input name="B" type="radio">2<br>
      <input name="B" type="radio">3<br>
      <input name="B" type="radio">4<br>
      <input name="B" type="radio">5
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

  <div class="block">
    <h3>header3</h3>
    <form>
      <input name="C" type="radio">this is a really really really really really really really really really really really long line
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

</div>

我试图让 stuff 类元素移动到其父 block 元素的右下角，并在没有空间的情况下扩展父元素的高度。 如果我对 stuff 类使用绝对定位，则在 radio 输入的文本和 stuff 元素的内容之间会出现重叠。 如果我使用相对定位，那么 stuff 元素似乎不遵守 bottom 属性。

Answer 1

您可以通过将此添加到您的 css 来实现我认为您正在寻找的布局:

h3 {width: 100%};

.block {
  display: flex;
  flex-wrap: wrap; 
}

.stuff {
  align-self: flex-end;
  margin-left: auto;
}

工作 fiddle :https://jsfiddle.net/75nv0we4/