在隱藏溢出的div內水平對齊div

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 divs坐在一條線上。 但是，他們只在#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 }​ 

演示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 - 所以在這種情況下，你只能看到3個元素的紅色div不能適合每個.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>