Div溢出並排浮動？

我有一個div包裝，裏面，我想divs並排。我想包裝一面是固定的，所以隨着更多的div添加，他們水平溢出！Div溢出並排浮動？

此外，我希望封裝寬度是固定的！所以我希望裏面的帖子在包裝內溢出！

我想用一個類，讓我有類似

<div id="wrapper"> 
     <div class='post'>Post 1</div> 
     <div class='post'>Post 2</div> 
     <div class='post'>Post 3</div> 
</div>

如何做呢？：p

乾杯！

來源

2011-12-12 user1083320

你的意思是他們溢出窗口的寬度，即「後」的div不換到窗口寬度，但你得到一個水平滾動條呢？ –

你是在追求什麼like this？這使得使用第二div您的包裝裏面的：包裝本身有一個固定的寬度，並overflow-x設置爲滾動：

#wrapper { 
    margin: 20px; 
    padding: 20px; 
    width: 300px; 
    overflow-x: auto; 
    background: #eee; 
    border: 1px solid #333; 
} 

#wrapper>div { 
    width: 600px; 
} 

.post { 
    background: #fff; 
    border: 1px solid #e4e4e4; 
    float:left; 
    margin-left: 20px; 
    padding: 40px; 
} 

.post:first-of-type { 
    margin-left: 0; 
}

來源

2011-12-12 09:03:02 CherryFlavourPez

完美！謝謝 – user1083320

將包裝的div有溢出：自動滾動，自動寬度調整（雖然你需要絕對定位爲正常工作，我相信 - 記得設置父相對準確的頂部位置：X並留下：在子div的x）然後浮動：離開.post類。

來源

2011-12-12 08:58:29

#wrapper { 
display: block; 
width: 600px; 
height: 100px; 
overflow-x: auto; 
overflow-y: hidden; 
background: #900; 
white-space: nowrap;} 

.post { 
display: inline-block; 
width: 250px; 
height: 100px; 
background: #c00; 
margin: 0 5px; }

Jfiddle sample here

來源

2011-12-12 09:08:20 Scott

據我理解你希望你的帖子水平滾動並排坐在一起。

要做到這一點，你需要添加額外的包裝，像這樣：

<div id="wrapper"> 
<div id="contentWrapper"> 
     <div class='post'>Post 1</div> 
     <div class='post'>Post 2</div> 
     <div class='post'>Post 3</div> 
     <div class='post'>Post 4</div> 
     <div class='post'>Post 5</div> 
     <div class='post'>Post 6</div> 
     <div class='post'>Post 7</div> 
     <div class='post'>Post 8</div> 
</div>

這裏的css來達到預期的效果：

#wrapper { 
    width:400px; 
    height:200px; 
    overflow: auto; 
} 
#contentWrapper { 
    float: left; 
    margin-right: -30000px; 
} 
.post { 
    width:100px; 
    height:100px; 
    display:inline-block; 
}

工作示例可以在這裏找到： http://jsfiddle.net/QNXmk/1/

來源

2011-12-12 09:22:12 michaeltintiuc

我想補充說，你不會知道你的內容容器的總寬度。總寬度基於帖子寬度總和的唯一解決方案是使用javascript。

這裏是一個小腳本，將做到這一點的例子：

/* adjust the size (width) of the posts container 
* this depends on all its posts widths 
*/ 

function setWrapper(){ 
    var finalW = 0; 
    itemsWrapper = $(".posts-container"); 
    itemsWrapper.find('.post').each(function(i){ 
     var $post = $(this); 
     finalW+=$post.width(); 
    }); 
    itemsWrapper.css('width',finalW+'px'); 
    console.log("Your total width is: "+finalW); 
} 
setWrapper();

有了這個，你將你的帖子容器設置爲正確的大小而不明確地傳遞給它的CSS。

來源

2011-12-12 11:03:34 BeatLaG

Div溢出並排浮動？

回答

相關問題