格側離開

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

您可以嘗試浮動你導航到左側，然後只需添加填充到您的內容股利。應該足以作爲你的問題的骯髒的解決方案。

.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;命令添加到#show_pics id並刪除#left_nav的float: left命令。通過#content_living中的寬度，您可以控制兩個div的內部空間。希望它有效。