我找不到将子元素放置在其父元素右下角的理想解决方案。
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/