div 并排浮动并溢出？

Question

我有一个 div 包装器，在它里面，我希望 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

干杯！！

Answer 1

您正在寻找这样的东西吗？
这利用了包装器内的第二个 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;
}

Answer 2

#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 示例

Answer 3

将包装器 div 设置为具有溢出：用于滚动的自动宽度，用于调整大小的自动宽度（尽管您需要绝对定位才能正常工作，我相信 - 请记住将父级设置为相对位置以获得准确的顶部：x 和左侧：x在子 div 中）然后 float:left .post 类。

Answer 4

据我了解，您希望您的帖子水平滚动并并排放置。

为了实现这一点，您需要添加一个额外的包装器，如下所示：

<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/

Answer 5

我想补充一点，您将不知道内容容器的总宽度。使总宽度基于帖子总宽度总和的唯一解决方案是使用 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 中显式传递它。