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

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>





我试图让东西类元素移动到其父块元素的右下角,并在没有空间的情况下扩大父元素的高度。
如果我将绝对定位用于填充类,则在单选输入的文本和填充元素的内容之间存在重叠。
如果我使用相对定位,则东西元素似乎不服从bottom属性。

最佳答案

您可以通过将其添加到css中来做我想寻找的布局:

h3 {width: 100%};

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

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


工作提琴:https://jsfiddle.net/75nv0we4/

10-05 20:59
查看更多