Question

eftMy 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

最好将浮动元素放在同一个父级内部，而不应该将其包含在内容中。因此请删除图片周围的div。

我敲了这个，所以你可以看到http://jsfiddle.net/FE3Wj/

Answer 4

这只是我的解决方案：

给#content_living一个宽度。然后向float: right; id添加#show_pics命令，并从float: left删除#left_nav命令。使用#content_living中的宽度，您可以控制内部两个div之间的空间。希望它有效。

div并排并向左浮动

4 个答案: