Question

说我有这个HTML：

<style>
.b{
float:left; width: 300px; height: 300px;
}
</style>

<div style="overflow:hidden;width:300px;height:300px;" id="a">
    <div class="b" style="background-color: red"></div>
    <div class="b" style="background-color: green"></div>
    <div class="b" style="background-color: blue"></div>
</div>

我希望.b div位于一行。但是，他们只在#a溢出正常时执行此操作。

Answer 1

将white-space: nowrap;添加到#a并从.b

中删除float：left

使用滚动条

#a{overflow:auto;width:300px;height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}

<强> DEMO

<小时/> 没有滚动条

#a{height:300px; white-space: nowrap;}
.b{
width: 300px; height: 300px; border:solid black 1px; display:inline-block
}

<强> DEMO 2

Answer 2

添加css属性 display：inline-block 。

重写

<div style="overflow:hidden;width:300px;height:300px;" id="a">

到

<div style="overflow:hidden;width:300px;height:300px;display:inline-block" id="a">

Answer 3

你的#a大小为300px x 300px - 所以在这种情况下你只能看到红色div，这3个元素不能适合一个尺寸较小的元素每个.b元素的宽度为300px，因此您必须将#a的宽度更改为900px -

Answer 4

您所要做的就是为您的班级提供display:inline-block;风格b。就是这样。

Answer 5

Overflow只是一个说它不能超过300px的属性;

因此，为了将它们彼此相邻堆叠，请使用属性float:left;，并确保保持在300px内;

示例

<style> .b{ float:left; width: 100px; height: 300px; } </style> <div style="overflow:hidden;width:300px;height:300px;" id="a"> <div class="b" style="background-color: red"></div> <div class="b" style="background-color: green"></div> <div class="b" style="background-color: blue"></div> </div>

在隐藏溢出的div内水平对齐div

5 个答案: