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

【问题标题】：Place divs next to each other regardless of parent width无论父宽度如何，将 div 彼此相邻放置
【发布时间】：2013-08-29 17:23:29
【问题描述】：

我想将 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

FIDDLE

【讨论】：

我相信这是正确的答案，我想我可能会错过阅读这个问题，认为他需要超过 1 行

【解决方案2】：

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

列结构是由浮动 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>

【讨论】：

编辑：使溢出自动删除垂直滚动。
我明白了，但问题是我不知道我将拥有多少列。所以，有时，它可能是 3 个，有时是 10 个，正如我所见，我需要根据它来更改 content-wrapper 的宽度。有动态解决方案吗？我尝试了 100%，但它不起作用。
100% 会将其调整为父宽度，如果您需要 3 列那么这将起作用，如果您想要 4 列更改宽度，则里面的项目数量会调整。如果每页的列都在变化，它如何知道你想要多少列而不改变一些东西？也许我们可以将它与一个类分开，或者您可以在您想要说 4 列的页面上设置“内容包装器”的宽度
只是重新阅读这个问题，也许我很困惑，你是想要它在行和列中还是只是在列彼此相邻浮动的一行？如果是这样，那么 Danield 的答案看起来是正确的
是的，我需要一行，并且列彼此相邻。对不起，如果我不够清楚，感谢您的帮助！

【解决方案3】：

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

使用float:left;

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

【讨论】：

是的，但这给了我两列，彼此相邻，我想拥有所有三列，以及滚动条来滚动不可见的 div。这可能吗？
因为你的内容宽度设置为100px；如果是 100%，那么我们可以在每个旁边放置 div。 @nedeljko
好的，我明白了。但问题是，我已经固定了该父部分的宽度，并且我希望能够在其中添加 div，并在添加的 div 的宽度大于父本身时显示滚动条。这可能吗？

【解决方案4】：

试试下面的 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;
}

【讨论】：

【解决方案5】：

使用width:auto;

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

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

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

【讨论】：