首先,我使用flex:属性在调整浏览器窗口大小时使两个相邻的flexitems增长和缩小。那很有效。
然后我将TEXTAEA元素放入第二个动态flexitem中。这很好。
在textarea旁边添加了单行TEXT输入元素,并观察到文本输入元素的底线与textarea的底线对齐,但我希望两个元素的顶行对齐。如果没有使用CSS编写脚本,我怎么能这样做呢?
.parent {
display: flex;
background-color: yellow;
}
.verttop {
align-items: flex-start;
}
.dimen {
height: 50px;
width: 50px;
}
.placeholder {
background-color: khaki;
width: 300px;
}
.bs1 {
background-color: green;
width: 20px;
}
.bs2 {
flex: 1 1 auto;
background-color: cyan;
}
.bs3 {
flex: 1 1 auto;
background-color: red;
}
.bs4 {
background-color: gray;
width: 100px;
}
<div class="parent">
<div class="placeholder dimen"></div>
<div class="bs1 dimen"></div>
<div class="bs2 dimen"></div>
<div class="bs3">
<textarea rows="10" cols="18">This is a fairly lengthy and annoyingly meaningless sentence.
</textarea>
<input class="verttop" type="text" value="Hello">
</div>
<div class="bs4 dimen"></div>
</div>
答案 0 :(得分:0)
您可以通过使.bs3 flex并对齐其项目来实现此目的。
.bs3 {
flex: 1 1 auto;
background-color: red;
display: flex;
align-items: flex-start;
}