无论父宽度如何，将div放在彼此的旁边

我想将div放在一起。我不知道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; 
}

来源

2013-08-29 Ned

添加white-space:nowrap到父DIV。

FIDDLE

来源

2013-08-29 09:20:49 Danield

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

非常感谢，这就是我需要的！ – Ned

不客气:) – Danield

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

使用float:left;

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

来源

2013-08-29 09:03:03

是的，但是这给了我两列，彼此相邻，我想有三个，并滚动条滚动显示不可见的div。那可能吗？ – Ned

这是因为您的内容宽度设置为100px;如果它是100％，那么我们可以将div放在每个旁边。 @nedeljko –

好吧，我明白了。但事情是，我有固定的父母部分的宽度，我希望能够在其中添加div，并显示滚动条，如果添加div的宽度大于父母本身。这可能吗？ – Ned

-1

使用width:auto;

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

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

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

来源

2013-08-29 09:08:07 SaturnsEye

为什么要为有效捐款投票？ – SaturnsEye

您将需要使用内容的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>

来源

2013-08-29 09:14:47

编辑：使溢出自动删除垂直滚动。 –

我明白了，但问题是我不知道我会有多少列。所以，有时候，它可能是3个，有时是10个，正如我所看到的，我需要根据它改变内容包装的宽度。有动态解决方案吗？我尝试了100％，但它不起作用。 – Ned

100％会将其调整为父宽度，如果您需要它在3列，那么这将起作用，如果您想要4列更改宽度，内部的项目数量将调整。如果每个页面的列都在变化，它如何知道你想要多少列而不用改变某些内容？也许我们可以用一个类来分隔它，或者你可以在页面上设置“content-wrapper”的宽度，你想要说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; 
}

来源

2013-08-29 09:23:29

无论父宽度如何，将div放在彼此的旁边

回答

相关问题