并列两个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; 
}