Question

我想把div放在一起。我不知道div的数量，因为这是动态创建和更改的。我想有一个父div，如果有很多子div（并且它们的宽度大于父级），它将有滚动条。

这是jsFiddle example。所以，基本上我想拥有所有这三列，彼此相邻，并且父div的底部有滚动条。

HTML：

<div class="content">
    <div class="column">Column</div>
    <div class="column">Column</div>
    <div class="column">Column</div>
</div>

CSS：

content {
    width: 100px;
    background- color: #355E95;  
    overflow: visible;
}

.column {
    width: 50px;
    display: inline-block;
}

Answer 1

将white-space:nowrap添加到您的父div。

<强> FIDDLE

Answer 2

您需要为滚动使用内容div，然后使用列的包装器，调整包装器的宽度以适合所有3列（在您的示例中为150px）。

列结构是浮动div的左边，但它会浮动到父容器的宽度，在这种情况下你的父容器只有100px所以我们需要为它们添加一个包装器以适应它。

如果您还想要垂直滚动，则需要为容器设置高度。

Jsfiddle：http://jsfiddle.net/tYnH3/

的CSS：

.content {
    width: 100px;
    background-color: #355E95;  
    overflow: auto;
}

.content-wrapper {
    width: 150px;
}

.column {
    width: 50px;
    float: left;
}

HTML：

<div class="content">
    <div class="content-wrapper">
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
        <div class="column">
            Column        
        </div>
    </div>
</div>

Answer 3

小提琴：http://jsfiddle.net/bdssw/

使用float:left;

.column {
    width: 50px;
    display: inline-block;
    float:left;
}

Answer 4

尝试以下JS小提琴

http://jsfiddle.net/jT6SW/1/

#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}

Answer 5

使用width:auto;

.content {
    width: auto;
    background-color: #355E95;  
    overflow:scrolling;
    position:fixed;
}

.column {
    width: 50px;
    float:left;
}

http://jsfiddle.net/XqSJG/6/

无论父宽度如何，都将div放在一起

5 个答案: