CSS - 使divs水平對齊

我有一個固定寬度和高度的容器div，其中overflow：hidden。CSS - 使divs水平對齊

我想要一個水平行的float：在這個容器內的左邊div。當他們閱讀父母的正確界限後，浮動的左邊自然會自動推到下面的'行'上。即使父母的身高不應該允許這種情況，也會發生這種情況。這就是這個樣子：

[錯誤] [1] - 已被換成了一個廣告去除圖像窩棚圖像

如何，我想它看起來：！

[右] [2] - 已被換成了一個廣告去除圖像窩棚圖像

注：我想可以通過使用內聯元素&空格來達到的效果：無包裝（即我是如何做到的在所示的圖像中）。然而，這對我來說並不好（因爲在這裏解釋太冗長的原因），因爲子div需要浮動塊級元素。

來源

2008-08-31 Robin Barnes

您的圖片鏈接似乎已損壞。如果你仍然有原件，請重新上傳到stack.imgur。謝謝！ – 2015-07-27 08:18:37

您可以將一個內部div放在足夠寬的容器中以容納所有浮動的div。

#container { 
 
    background-color: red; 
 
    overflow: hidden; 
 
    width: 200px; 
 
} 
 

 
#inner { 
 
    overflow: hidden; 
 
    width: 2000px; 
 
} 
 

 
.child { 
 
    float: left; 
 
    background-color: blue; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>

來源

2008-08-31 21:29:59 LucaM

這似乎接近你想要什麼：

#foo { 
 
    background: red; 
 
    max-height: 100px; 
 
    overflow-y: hidden; 
 
} 
 

 
.bar { 
 
    background: blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    margin: 1em; 
 
}

<div id="foo"> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
</div>

來源

2008-08-31 21:24:05

可以使用clip屬性：

#container { 
    position: absolute; 
    clip: rect(0px,200px,100px,0px); 
    overflow: hidden; 
    background: red; 
}

注意position: absolute並且爲了獲得clip需要overflow: hidden上班。

來源

2008-08-31 21:28:31 fcurella

什麼是剪輯的瀏覽器支持？ – alex 2008-10-28 06:27:30

來自http://www.w3schools.com/cssref/pr_pos_clip.asp： clip屬性在所有主流瀏覽器中均受支持。注意：「繼承」值在IE7及更早版本中不受支持。 IE8需要！DOCTYPE。 IE9支持「繼承」。 – dsomnus 2012-08-16 17:56:40

style="overflow:hidden"父div和style="float: left"所有的孩子都divs使divs水平對齊老的瀏覽器IE7一樣以下重要。

對於現代瀏覽器，您可以使用style="display: table-cell"爲所有子女divs，它將水平正確渲染。

來源

2011-04-13 11:17:50 Kwex

將它們浮起。在Chrome中，至少，你不需要在LucaM的例子中有一個包裝，id="container"。

來源

2012-07-30 07:57:55

float：left，display：inline-block如果超過容器的寬度，將無法水平對齊元素。

重要的是要注意容器不應包裝如果元素必須水平顯示是很重要的： white-space: nowrap

來源

2015-08-28 17:57:15

您現在可以使用CSS Flexbox的水平和垂直對齊的div如果你需要。通用公式就是這樣的

parent-div { 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: center ; /* for horizontal aligning of child divs */ 
    align-items : center ; /* for vertical aligning */ 
    } 
child-div { 
    width: /* yoursize for each div */ ; 
}

來源

2016-07-17 10:58:04

CSS - 使divs水平對齊

回答

相關問題