Question

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

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 class元素移至其父块元素的右下角，并在没有空间的情况下扩大父元素的高度。如果我将绝对定位用于填充类，则在单选输入的文本和填充元素的内容之间存在重叠。如果我使用相对定位，则stuff元素似乎不服从bottom属性。

Answer 1

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

h3 {width: 100%};

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

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

有效的提琴：https://jsfiddle.net/75nv0we4/

Answer 2

在包含“ form”和“ .stuff” div的容器上使用flex-box。

使用justify-content来根据您的需要对齐内容。检查随附的代码段。

#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;
}

.flex-container
{
  display: flex;
  justify-content: space-between;
}



.stuff {
	border: 2px solid black;
	margin: 0% 0% 0% 0%;
  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>
 <div class="flex-container">
  <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>

<div class="block">
 <h3>header2</h3>
 <div class="flex-container">
  <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>
 <div class="flex-container">
  <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>
</div>

有没有一种方法可以将元素相对放置在其父元素的底部

2 个答案: