html - 并排放置两个 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 ... Fiddle

Answer 1

您的边框宽度会添加到内容宽度中。 250+2*10 + 250+2*10 == 540。

(你可以在这里阅读 https://developer.mozilla.org/en/docs/Web/CSS/box-sizing 浏览器如何计算 block 元素的大小)

对于您的自定义样式，通常最好设置 box-sizing: border-box( http://www.paulirish.com/2012/box-sizing-border-box-ftw/ )

编辑:是的，还有 .well-car 类上的 float:left，正如其他人指出的那样。