将多个元素与父元素的底部对齐

时间:2018-06-06 01:09:14

标签: html css internet-explorer-11

我正在尝试将多个输入框对齐到父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(我知道已过时),同时也在使用现代浏览器。

谢谢。

1 个答案:

答案 0 :(得分:1)

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

.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替换浮动并保留默认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>