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

Question

我有两列显示内联块,并排在主包装内.当我向一列添加元素时,第二列被进一步向下推.我想知道导致这种行为的原因,以便我能更好地理解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例子