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内部之间的空间。 希望它能工作。