無法將一列與其他DIV對齊DIV

Question

我正嘗試在左邊有一些DIV，右邊有一個大DIV。我已經開始在小提琴上嘗試它了，當我將邊界屬性分配給我的DIV時，第一個問題就出現了。

HTML：

<div id="container"> 
    <div id="iframe"></div> 
    <div id="tab1"></div> 
</div> 

CSS：

#container { 
margin:0; 
background-color:yellow; 
height: 500px; 
width:100%; 
} 
#iframe{ 
width: 85%; 
height: 100%; 
float: right; 
border: 1px solid red; 
} 
#tab1 { 
width: 15%; 
height: 15%; 
float:left; 
border: 1px solid green; 
} 

View on Fiddle

無論如何，我期待着這個目標（所以也許我的做法是不正確的......）

有什麼想法？

Answer 1

您的邊框寬度擴展了您的元素寬度。只需將box-sizing: border-box;添加到您的元素中即可將邊框包含在給定的寬度中。然後浮動應該是預期的。

你可以閱讀更多關於CSS box model on MDN（感謝評論@ tabs1200中的提示）。

#iframe{ 
    ... 
    box-sizing: border-box; 
} 

#tab1 { 
    ... 
    box-sizing: border-box; 
} 

這裏是一個工作示例：

#container { 
 
    margin: 0; 
 
    background-color: yellow; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
#iframe { 
 
    width: 85%; 
 
    height: 100%; 
 
    float: right; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 
#tab1 { 
 
    width: 15%; 
 
    height: 15%; 
 
    float: left; 
 
    border: 1px solid green; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <div id="iframe"></div> 
 
    <div id="tab1"></div> 
 
</div>

Answer 2

使用盒大小。此代碼應工作：

* { 
    box-sizing: border-box; 
}