Question

我有一系列没有正确包装的内联div。在调整浏览器大小时，div应该左对齐，但有时它们是齐平的。我已经阅读了几篇关于此的文章，但它们似乎不是同一个问题。任何帮助将非常感激。我的jsfiddle是http://jsfiddle.net/7uuLaLg4/。

<style type="text/css">
    .box
    {
        float: left;
        border: 1px solid black;
    }

    .address .item
    {
        display: inline;
        float: left;
    }
</style>



<div class="box">
    <div class="address">
        <div class="item">
            <div>Address (Number & Road) <label class="required">*</label></div>
            <div><input id="User_Address_Address1" name="User.Address.Address1" style="width: 13em;" type="text" value="1 Main St." /></div>
        </div>
        <div class="item">
            <div>Address 2 (APT, Suite...)</div>
            <div><input id="User_Address_Address2" name="User.Address.Address2" type="text" value="" /></div>
        </div>
        <div class="item">
            <div>City<label class="required">*</label></div>
            <div><input id="User_Address_City" name="User.Address.City" type="text" value="Anytown" /></div>
        </div>
        <div class="item">
            <div>State<label class="required">*</label></div>
            <div>
                <select id="User_Address_StateID" name="User.Address.StateID">
                    <option selected="selected" value="3">Kentucky</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div>Zip<label class="required">*</label></div>
            <div><input class="zip-mask" id="User_Address_Zip" maxlength="5" name="User.Address.Zip" style="width: 5em;" type="text" value="12345" /></div>
        </div>
        <div class="item">
            <div>County<label class="required">*</label></div>
            <div>
                <select id="User_Address_CountyID" name="User.Address.CountyID">
                    <option value="0"></option>
                    <option selected="selected" value="125542">Campbell</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div>Country<label class="required">*</label></div>
            <div>
                <select id="User_Address_CountryID" name="User.Address.CountryID">
                    <option value="0"></option>
                    <option selected="selected" value="1">United States</option>
                </select>
            </div>
        </div>
    </div>
</div>

Answer 1

这是固定的例子。

http://jsfiddle.net/7uuLaLg4/2/

.box{
    border: 1px solid black;
    text-align: left;
}

.address .item{
    display: inline-block;
    margin: 0 0 10px 0;
}

Answer 2

它们的高度并不完全相同，这就是为什么有时候它们表现得像是浮动的一样。

像min-height: 60px;这样的东西应该会有所帮助。

.address .item {
    display: inline-block;
    min-height: 60px;
}

http://jsfiddle.net/bb1ooguo/1/

内联div没有正确包装

2 个答案: