Question

我正在寻找以下行为的解释。我在父div display:inline-block中有两个#secondlevel1 div（#secondlevel2和#firstlevel）。我不明白为什么第一个div（#secondlevel1）与父div的下边距对齐，而#secondlevel2 div与父div的上边距对齐。我没有指定任何对齐，所以我没想到会发生这种情况。有人可以开导我吗？我想确切地知道缩进默认规则是如何工作的。

我希望将#secondlevel2和#secondlevel1 div保持与父级的上边距对齐，并让#secondlevel1 div垂直展开，因为第一个div的表的行增加。有没有办法做到这一点？如果我能提供帮助，我不喜欢使用花车。

我也将其输入http://jsfiddle.net/Ljazf/2/以便于查看。

</div>

    <div style="display:inline-block" id="firstlevel">
        <div style="display:inline-block;padding:10px;width:200" id="secondlevel1">
            <div  id="distance" style="">
                Distance from Agra to Ajmer
            </div>
            <input style="width:inherit" type="text">
            </input>
            <table style="width:inherit">
                <tr>
                    <td>asdf</td>
                    <td>aaaa</td>
                </tr>
                <tr>
                    <td>asddd</td>
                    <td>asff</td>
                </tr>
            </table>
        </div>
        <div id="secondlevel2" style="width:;height:100;display:inline-block">
            <input  style="display:block" type="text">
            </input>

            <input  style="display:block" type="text">
            </input>
            <button style="display:block" value="hello">
            Hehehhe</button>
        </div>
    </div>
    </div>

</body>

Answer 1

添加vertical-align：top;到你的第一个div

div如何在div中缩进

1 个答案: