html - 向第一列添加元素会将第二列向下推

Question

我在主包装器内并排显示了两列内联 block 。当我将一个元素添加到一列时，第二列被进一步向下推。我想知道是什么导致了这种行为，以便我可以更好地理解 css。我在主列中添加了一个 ul，右列中的辅助列向下推以显示主包装器的背景颜色。

这是 HTML:

<div class="main-wrapper">

         <div class="primary-col col">
            <div class="prim-header">
                <div class="logo"><h1>logo</h1></div>
                <div class="nav"><ul>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Links</a></li>
                </ul></div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam harum, expedita ex a odio voluptas obcaecati unde corporis molestias assumenda in esse reprehenderit, enim inventore labore! Numquam ad doloribus culpa.</p>



         </div>
         <div class="secondary-col col">
            <div class="sec-header">
                <div class="logo"><h1>logo</h1></div>
                <div class="nav"></div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos laborum aliquam, distinctio repudiandae ut asperiores fugit quidem, maxime qui eveniet ex odio. Aut ab itaque, harum laboriosam aspernatur dolor quasi.</p>
         </div>

</div>

还有 CSS:

    * {box-sizing: border-box;}

        body {
            font:normal 1.4em/1.5 sans-serif;
        }

        .main-wrapper {
            width:90%;
            background:red;
            margin: 0 auto;
        }

        .col {
            margin-right:-6px;

        }

        .primary-col {
            width:50%;
            background:#ededed;
            display:inline-block;
            padding:10px;
        }

        .secondary-col {
            width:50%;
            background:#ccc;
            display:inline-block;
            padding:10px;

        }

        .prim-header{
            background:#ccc;
            min-height:100px;
            margin:0 auto;
        }

        .sec-header{
            background:#ebebeb;
            min-height:100px;
            margin:0 auto;
        }


        .nav ul,
        .nav li {
            display:inline-block;
        }

Answer 1

因为行内元素有一个默认的垂直基线对齐方式。您想将其设置为顶部:

.col {
    margin-right:-6px;
    vertical-align:top;
}

jsFiddle example