0

假设我有这个 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>

我希望.bdiv 坐在一条线上。但是，它们仅在#a' 溢出正常时才这样做。

4

5 回答 5

2

添加和删white-space: nowrap;​​除#afloat:left from.b

带滚动条

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

演示

没有滚动条

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

演示 2

于 2012-12-12T07:02:06.913 回答
0

添加 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">
于 2012-12-12T06:59:56.403 回答
0

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

于 2012-12-12T07:05:27.560 回答
0

您所要做的就是display:inline-block;为您的班级 b 赋予一种风格。就是这样。

于 2012-12-12T07:24:24.990 回答
0

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>
于 2012-12-12T07:26:10.200 回答