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溢出并排浮动？

回答

相关问题