父元素寬度一定，子元素完美均分父級寬度

我們都是愛美的生物，大多數要求對乙個東西進行分割時，我們都會盡可能的均分它。在頁面中，乙個div盒子有的固定畫素寬度，有的為百分比。如何能很好的均分乙個div呢？

以下將提供五個均分父元素的方法,其中 方法四flex布局為常用

先提供原始**及其展示：

為了展示有所區別，便於觀察，新增了padding，不同的子元素新增不同的border顏色

html:

class

="child"
>
child1div
>
class
="child"
>
child2div
>
class
="child"
>
child3div
>
div>
css:
.farther
.farther div:nth-of-type(1)
.farther div:nth-of-type(2)
.farther div:nth-of-type(3)

下面我們將child1，child2，child3實現均分父盒子的寬度

所需要實現的效果：

將子元素依次左浮動，根據子元素的個數，設定每個子元素的寬度百分比，如100/3=33.3%

注意：！子元素浮動會造成 高度坍塌 ，需要對父元素使用overflow:hidden;

！當設定了border或其他值後，子元素的寬度將 大於 所設定的寬度，還需要設定box-sizing:border-box

css**：

.farther div

.farther

css**：

.farther div

**這時候簡單粗暴的方法為更改html** 不換行 **

class

="farther"
>
class
="child"
>
child1div
>
class
="child"
>
child2div
>
class
="child"
>
child3div
>
div>
這樣就能實現沒有空白，當然也有別的方法解決inline-block的留白。
不會造成高度坍塌，也不用設定box-sizing，但是對父元素的寬度有所設定。不然父元素的寬度只會為子元素的長度之和。
css**：
.farther
.farther div

css**：

.farther div

.farther

class

="farther"
>
class
="child col-md-4"
>
child1div
>
class
="child col-md-4"
>
child2div
>
class
="child col-md-4"
>
child3div
>
div>

CSS 父元素寬度自適應子元素寬度之和

直接新增 width max content 宣告就 ok，之前太單純了。最近碰見這樣乙個需求，要讓橫向排列設定 x 方向的滾動條滾動檢視，原本當直接建立乙個 ifc inline，float 什麼的 就解決了，搞了半天發現搞不定 ifc 也是不能父元素寬度自適應子元素寬度之和的，因為會換行。最後用...

清除上外邊距溢位和浮動對父元素寬度的影響

上外邊距溢位 父元素沒有邊框border，子元素設定了上外邊距，此時就會出現上外邊距溢位，本該子元素設定了上外邊距，結果卻是沒有體現出來，反而父元素上多了子元素設定的上外邊距 解決方案 在父元素新增類clearmargin top clearmargin top before浮動對父元素寬度的影響 ...

css選中父元素下的第乙個子元素

最近在專案中用到 first child很容易的就想到了，嗯嗯。這不就是選擇第乙個元素嗎？好像很好用，平時使用中也沒有遇到什麼問題，理所當然的就以為它只會選中父元素下的第乙個元素，對孫元素和曾孫元素沒有影響。事實證明，我的理所當然是錯的。body p first child style head 這...