0

要素「.wrap1」と「.wrap2」の上部を揃えようとしています。このjsfiddleでわかるように、「wrap1」の上部が「.wrap2」の少し下にありますが、表示されたテキストを「.wrap2」から削除すると、上部が整列します。テキストが「.wrap1」の上部を下げている理由を説明できる人はいますか?

<html>

<body>
    <ul
    style="margin:0px 0px!important;position:relative;width:100%"
    class="mainList"
    id="dateMainList">
        <li
        class="list-element"
        id=""
        style="width:100%">
            <div
            class="list-inner-wrap"
            style="border:1px solid black">
                <div
                class="wrap1"
                style="display:inline-block;background:white;border:2px solid black;height:50px;width:50px">
                    <div
                    class="line-1"
                    style="display:block;text-align:center;font-size:10pt">1</div>
                        <div
                        class="line-2"
                        style="display:block;text-align:center;font-size:10pt">2</div>
                            <div
                            class="line-3"
                            style="display:block;text-align:center;font-size:10pt">3</div>
                                </div>
                                <div
                                class="wrap2"
                                style="display:inline-block;height:50px;background:green;width:200px"></div>
                                    </div>
                                    </li>
                                    </ul>
</body>
4

3 に答える 3

4

どちらもdisplay:inline-blockインライン扱いなのでvertical-align:top;、両方をかぶせて並べることができます。または、それらを作成しdisplay:blockてfloat:left.

于 2013-09-16T01:50:06.613 に答える
0

float:left;に追加.wrap1 & wrap2または単に.wrap1

于 2013-09-16T01:41:58.837 に答える