html - 为什么 div 没有正确垂直对齐？

Question

我想实现这个(link to full size image):

我已经做到了(link to full size image):

如果您注意到，从右到左导航中的 div 并没有显示在顶部，而是显示在底部。它应该开始显示在顶部导航的正下方。

这是 HTML:

<div id="container">
    <div id="header">
        <div id="logo">
            <img src="images/parislane-ebay-listing-template2_02.png" alt="">
        </div>
        <div id="top-nav">
            <img src="images/parislane-ebay-listing-template2_05_01.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_02.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_03.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_04.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_05.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_06.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_07.png" alt="">
        </div>
    </div>
    <div id="content">
        <div id="left-nav">
            <div id="left-nav-head">STORE CATEGORIES</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
        </div>
        <div id="content-right">
            item title may go here item title may go here 
        </div>
    </div>
</div>

这是 CSS:

img{ display:block; }
#container { background-color: #000; width: 100%; overflow:hidden; }
#header { width: 1010px; margin:0 auto 65px auto; }
#logo { width: 1010px; margin-bottom: 13px; }
#top-nav img { float:left; }
#content { width: 1010px; margin:0 auto; }
#left-nav { border: solid 1px #e56bae; width: 188px; }
#left-nav-head { background-image:url(images/parislane-ebay-listing-template2_15.png); height: 22px; padding-left:9px; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#000; font-weight:bold; padding-top: 10px; }
.left-nav-link { background-color:#292929; border-bottom: solid 1px #4b4b4b; padding:9px 9px 7px 9px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color:#fff; }
#content-right { width:805px; margin-left:15px; float:right; color:#fff; text-align:center; }

Answer 1

你需要让 div 向左浮动。

#nav-left, #content-right{
float:left;
}

参见 fiddle :http://jsfiddle.net/3EJ6k/

block 元素占据一整行，即使连续 2 个元素的宽度理论上应该并排放置，除非 float ，否则它们不会这样做。