如果您查看下面的HTML，您会看到我基本上有两列。
两者都有标签和输入，第一个有额外的img。
你会注意到第一列的标签缠绕在一起推动两个输入不对齐。
如果不改变两个div的基本结构，我可以保持两个输入对齐，同时将图像保留在第一个文本框下面的第一列中吗？
我尝试过使用绝对定位和底部属性的东西，虽然如果第一列中没有图像我可以使它工作，但是当它存在时我无法使其工作。
如果CSS无法实现，我可以使用jQuery之类的东西吗？谢谢你的帮助！
.flexForm {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 300px;
padding-bottom: 20px;
}
.flexCol {
flex-basis: 48.75%;<div>
<div class="flexForm">
<div class="flexCol">
<label>Username Label That Wraps</label>
<input>
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</div>
<div class="flexCol">
<label>password</label>
<input type="password">
</div>
</div>
<div>
<button>submit</button>
</div>
</div>
答案 0 :(得分：0)
仅CSS解决方案：
我不得不稍微修改你的标记，我使用了以前的命名约定。你可以改变它。
我的想法是我有一个字段包装器，它包含三个字段，无论最后一个字段是否为空。每个字段占据父高度的33％。因此他们都很好地排队。
/** MY CODE **/
.form {
display: flex;
width: 300px;
}
.form__column {
height: 125px;
}
.field__wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.field {
height: 33.3333%;
}<!-- MY CODE -->
<div class="form">
<div class="form__column">
<div class="field__wrapper">
<div class="field">
<label>Username Label Wraps. It's long.. </label>
</div>
<div class="field">
<input>
</div>
<div class="field">
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</div>
</div>
</div>
<div class="form__column">
<div class="field__wrapper">
<div class="field">
<label>Password</label>
</div>
<div class="field">
<input>
</div>
<div class="field">
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您需要通过继承其子容器的宽度来使父容器响应。
另外，如果您不担心SEO，因为您制作一些应用程序似乎是登录页面使用语义有意义的标签，那么您不会迷失<div>世界。
html{
height: 100%;
}
html *{
box-sizing: border-box;
}
body{
margin: 0 !important;
padding: 1em;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: -webkit-radial-gradient(#41a3ff,#0273D4);
}
form{
position: relative;
padding: 1em;
display: flex;
justify-content: center; /*flex-start - whatever you want*/
flex-wrap: wrap;
background-color: #ECF0F1;
-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
form > *{
position: relative;
width: 300px;
margin: .5em;
display: flex;
flex-direction: column;
}
form > * > label{
/* white-space: nowrap; */
}
form > button{
top: 17px;
height: 19px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #0273D4;
cursor: pointer;
outline: none;
font-size: 1em;
font-weight: bold;
border: 1px solid #0089C4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
}
form > button:hover{
background-color: #0B9AD8;
}
form > button:active{
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}<html>
<body>
<form>
<username>
<label>Username Label That Wraps</label>
<input></input>
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</username>
<password>
<label>password</label>
<input></input>
</password>
<button type="submit">click me</button>
</form>
</body>
<html>
答案 2 :(得分：-1)
好的，这是一个仅限CSS的解决方案：
.flexForm {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 300px;
padding-bottom: 20px;
}
.flexCol {
flex-basis: 48.75%;
}
input[type="password"] {
margin-top: 18px;
}<div>
<div class="flexForm">
<div class="flexCol">
<label>Username Label That Wraps</label>
<input>
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</div>
<div class="flexCol">
<label>password</label>
<input type="password">
</div>
</div>
<div>
<button>submit</button>
</div>
</div>
基本上，我所做的只是给输入框一个上边距。您使用的保证金将取决于标签标签中每一行的高度。在这种情况下，此值为18px。但是，如果更改字体大小，则必须计算新的边距。
希望这有帮助！
答案 3 :(得分：-1)
您正在寻找的内容可能适用于CSS。
选项1 - html没有变化。如果图像大小已知并且您确定只有一个标签内容将要包装，则可以正常工作：
基于您已有的代码。使列flex容器的flex-direction设置为column，然后将reasony-content调整为space-between。这样，由于两列都具有由具有更多内容的列强制的高度，因此没有图像的列将其内容推到顶部和底部。您只需要为该输入提供与图像高度相同的margin-bottom。很容易定位该输入，因为它将是最后一列的列。
检查代码段。
form {
width: 300px;
display: flex;
}
div {
min-width: 0%;
flex: 1 0 0%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
div + div {
margin-left: 10px;
}
label,
input,
img {
flex: 0 0 auto;
}
input {
width: 100%;
box-sizing: border-box;
}
input:last-child {
margin-bottom: 50px;
}
button {
margin-top: 10px;
} <form class="flexForm">
<div class="flexCol">
<label>Username Label That Wraps</label>
<input>
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</div>
<div class="flexCol">
<label>password</label>
<input type="password">
</div>
</form>
<button>submit</button>
选项2 - 需要更改html：
您只需将标签放在一行，其余内容放在另一行。在每个行中都放置了列。
当其中一个标签包装并获得更多高度时，行高度会向下推动，在该行下面的内容将保持对齐，因为它位于同一行中。
form {
width: 300px;
}
.row {
display: flex;
}
.column {
min-width: 0%;
flex: 1 0 0%;;
}
.column + .column {
margin-left: 15px;
}
input {
width: 100%;
margin-bottom: 5px;
}
button {
margin-top: 10px;
}<form action="">
<div class="row">
<div class="column">
<label for="firstInput">This is a very long label that wraps pushing the input down</label>
</div>
<div class="column">
<label for="secondInput">This one is shorter!</label>
</div>
</div>
<div class="row">
<div class="column">
<input type="text" id="firstInput">
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50x50&w=50&h=50">
</div>
<div class="column">
<input type="text" id="secondInput">
</div>
</div>
<button type="submit">Submit</button>
</form>