div並排並向左浮動

Question

eft我的html：

<div id="content_living" >
    <div id="leftnav">
    //only text href
    </div> 
    <div id="show_pics">
    //pics: 1, 2, 3 4, - all href with img
    </div> 
</div>

我的CSS：

#content_living {

}

#leftnav{
float:left;
width:200px;
padding-left: 20px;
padding-top: 30px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);  
}

#show_pics {
padding-top:15px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 10px;
width: auto;
}

我得到的是：

href1  | pic1 pic2 pic3
href2  | pic4 pic5 pic6
       | pic7 pic8 pic9
       | pic10 pic11 pic12

但是我想要的是：

href1  | pic1 pic2 pic3
href2  | pic4 pic5 pic6
| pic7 pic8 pic9 pic10
| pic11 pic12 ...

我做錯了什么？

Answer 1

將display:inline添加到#show_pics

的jsfiddle

Answer 2

您可以嘗試將導航浮動到左側，然后在內容div中添加填充。 應該足以解決您的問題。

.left-nav {
    float:left;
    width:90px;
    background:darkgray;
}
.main-content {
    padding-left:100px;
}

JSFIDDLE http://jsfiddle.net/QWhSn/

Answer 3

最好將float元素與應該環繞其內容的內容放在同一父對象中。 因此，刪除圖片周圍的div 。

我把它敲了一下，所以你可以看到http://jsfiddle.net/FE3Wj/

Answer 4

那只是我的解決方案：

賦予#content_living寬度。 比添加一個float: right; 命令到#show_pics id並從#left_nav刪除float: left命令。 使用#content_living的寬度，您可以控制兩個div內部之間的空間。 希望它能工作。