並列兩個div類

Question

儘管我使用了float，但我的兩個div類並不想並排排列。怎麼做？ 基本上整個寬度是520px，每個框的寬度是250px，在20px的框之間有一個空白。

<div id="car-box"> 
<div class="well-car"> 
       <div class="add_box"> 
        <h1 class="add_heading">car model</h1> 
       </div> 
       </div> 

       <div class="car-brand"> 
        <a class="button" href="www.placehold.it">car brand</a> 
       </div> 
</div> 

和CSS：

.car-box { 
    width:520px; 
    height:500px; 
    border:5px dashed blue; 
    margin-right:10px; 
    float:left 
} 

.well-car { 
    width:250px; 
    height:250px; 
    border:10px solid red; 
} 
.car-brand { 
    width: 250px; 
    height:250px; 
    border:10px dashed blue; 
    font-size: 20px; 
    float:left 
} 

這裏小提琴...... Fiddle

Answer 1

你的邊框寬度被添加到內容的寬度。 250+2*10 + 250+2*10 == 540。

（你可以在這裏閱讀https://developer.mozilla.org/en/docs/Web/CSS/box-sizing瀏覽器如何計算塊元素的大小）

爲您的自定義樣式通常最好設置box-sizing: border-box（http://www.paulirish.com/2012/box-sizing-border-box-ftw/）

編輯：是的，還float:left上正如其他人指出的那樣，這個課程是.well-car。

Answer 2

你需要浮動.well-car還有：

http://jsfiddle.net/b3kd9mwf/26/

Answer 3

你只需要添加浮動：左;與您的分類「好車」。

.well-car { 
width:250px; 
height:250px; 
border:10px solid red; 
float: left; 
} 

Answer 4

你沒有正確地浮動你的元素。類wellcar應浮動到left和類car-brand應漂浮到right。下面的代碼應該可以工作。

#car-box { 
    width:520px; 
    height:500px; 
    border:5px dashed blue; 
    margin-right:10px; 
} 

.well-car { 
    width:250px; 
    height:250px; 
    border:10px solid red; 
    float: left; 
} 

.car-brand { 
    width: 250px; 
    height:250px; 
    border:10px dashed blue; 
    font-size: 20px; 
    float:right; 
}