Question

我有一个div包装器，在里面，我想要divs并排。我希望包装器侧固定，以便随着更多的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

你是在追求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;
}

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 sample here

Answer 3

将包装器div设置为溢出：auto用于滚动，自动宽度用于调整大小（尽管你需要定位绝对值才能正常工作我相信 - 记得将父级设置为相对位置以获得准确的顶部：x和left：x in sub div's）then float：离开.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();

使用此功能，您可以将posts容器设置为正确的大小，而无需在css中明确传递。

Div与溢出并排浮动？

5 个答案: