html - 无论父宽度如何，将 div 彼此相邻放置

Question

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

这是 jsFiddle示例。所以，基本上我想拥有这三列，彼此相邻，并且在父 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。

小提琴

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

Fiddle: http://jsfiddle.net/bdssw/

use float:left;

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

Answer 4

Try the following JS fiddle

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/