Question

<!DOCTYPE html>
<html>
    <head>
        <style>
            #other {
                background: #f4e5dc;
                margin-top: 48px;
            }

            .otherIn {
                width: 256px;
                font-family: Georgia;
                display: inline-block;
                margin-left: 28px;
                color: #af182a;

            }

            .otherIn h1 {
                font-family: "FertigoProRegular";
            }
        </style>
    </head>
    <body>
        <div id="other">
            <div id="menu_items" class="otherIn">
                <h1>Menu Items</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. </p>
            </div>
            <div id="video" class="otherIn">
                <h1>Food Videos</h1>
               <!-- <video width="250" controls preload="none" poster="_images/video_wait.png">
                    <source src="_video/How To Correctly Add Milk to Your Coffee.webm">
                    <source src="_video/How To Correctly Add Milk to Your Coffee.mp4">
                    Jūsu pārlūks neatbalsta audio
                </video> -->
            </div>
            <div id="msg" class="otherIn">
                <h1>Testimonials</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. </p>
            </div>
        </div>
    </body>
</html>

为什么，使用此代码，text / div从底部开始..而不是从顶部开始？是的，这是它的样子。 http://jsfiddle.net/8W3Gq/embedded/result/ 希望得到你的帮助...................

Answer 1

因为您在css中错过了vertical-align:top类.otherIn类：

参见演示： http://jsfiddle.net/rathoreahsan/8W3Gq/1/

Answer 2

添加vertical-align：top;到css中的.otherIn类

Div的内部Div从底部开始

2 个答案: