獲取2個div伸展以便始終填充包裹div的寬度

Question

我已經搜索了這個並閱讀了有關浮動，但我不明白爲什麼我不能讓2個div在一個包裝中同樣浮動DIV。

#wrap { 
 
    border: 1px solid red; 
 
    height: 200px; 
 
    width: 100%; 
 
    
 
} 
 

 
#gr1 { 
 
    border: 1px solid blue; 
 
    float: left; 
 
    
 
    
 
} 
 

 
#gr2 { 
 
    border: 1px solid blue; 
 
    float: left; 
 
}

<div id="wrap"> \t \t 
 
\t \t <div id="gr1">Group 1 
 
\t \t </div> 
 

 
\t \t <div id="gr2">Group 2 
 
\t \t </div> 
 
</div>

我想這應該使它所以第1組和第2組總是同樣填充包裝div的寬度像下面的形象。無論瀏覽器的大小如何，我都希望它永遠如此。我試過讓gr1和gr2的寬度達到50％，但是gr2只是下降到gr1的下面。我錯過了什麼？

Answer 1

#wrap { 
 
    border: 1px solid red; 
 
    height: 200px; 
 
    width: 100%; 
 
    
 
} 
 

 
#gr1 { 
 
    border: 1px solid blue; 
 
    float: left; 
 
    
 
    
 
} 
 

 
#gr2 { 
 
    border: 1px solid blue; 
 
    float: left; 
 
} 
 

 
#gr1, #gr2 { 
 
    width: 50%; 
 
    box-sizing: border-box 
 
}

<div id="wrap"> \t \t 
 
\t \t <div id="gr1">Group 1 
 
\t \t </div> 
 

 
\t \t <div id="gr2">Group 2 
 
\t \t </div> 
 
</div>

Answer 2

默認情況下，設置元素不包含任何邊框或留白，這就是爲什麼你的50％的大小是不工作的大小 - 邊界爲每個元素的大小添加一個額外的2個像素。

使用box-sizing屬性可讓您更改此行爲，以便尺寸包含邊框和填充。例如： -

#wrap { 
 
    border: 1px solid red; 
 
    height: 200px; 
 
    width: 100%; 
 
    
 
} 
 

 
#gr1 { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    border: 1px solid blue; 
 
    float: left; 
 
    
 
    
 
} 
 

 
#gr2 { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    border: 1px solid blue; 
 
    float: left; 
 
}

<div id="wrap"> \t \t 
 
\t \t <div id="gr1">Group 1 
 
\t \t </div> 
 

 
\t \t <div id="gr2">Group 2 
 
\t \t </div> 
 
</div>