将多个元素与父元素底部对齐答案

【问题标题】：Aligning Multiple Elements to Bottom of Parent将多个元素与父元素底部对齐
【发布时间】：2018-06-06 09:25:12
【问题描述】：

我正在尝试将多个输入框对齐到父 div 的底部。例如：

    .inner-container {
        margin-right: 10px;
        float: left;
    }

    <div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br />
            <input type="text" placeholder="something here" />
        </div>
        <div class="inner-container">
            <label>Test</label><br />
            <input type="text" placeholder="something here" />
        </div>
        <div class="inner-container">
            <input type="text" placeholder="something here" />
        </div>
    </div>

注意最后一个输入框是如何与其他输入框不对齐的。我试图让这个盒子与其他盒子垂直对齐。

我也试图让它在 IE11 上也能工作（我知道已经过时了），同时也在现代浏览器上工作。

谢谢。

【问题讨论】：

标签： html css internet-explorer-11

【解决方案1】：

如果您不想要复杂的 CSS，一个简单的解决方案是添加 br 并确保它适用于 dead IE：

.inner-container {
        margin-right: 10px;
        float: left;
    }

<div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
             <br>
            <input type="text" placeholder="something here" >
        </div>
    </div>

或者用inline-block替换float并保持默认vertical-align：

.inner-container {
        margin-right: 10px;
        display:inline-block;
    }

<div class="outer-container">
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <label>Test</label><br >
            <input type="text" placeholder="something here" >
        </div>
        <div class="inner-container">
            <input type="text" placeholder="something here" >
        </div>
    </div>

【讨论】：