两个 div 类并排答案

【问题标题】：Two div classes side-by-side两个 div 类并排
【发布时间】：2015-06-22 03:56:03
【问题描述】：

即使我使用了 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

【问题讨论】：

每个人似乎都错过了应该是 #car-box 而不是 .car-box 或 class="car-box" 而不是 id - 你拥有它的方式你根本没有设计外部 div所以它不是 520px 宽（但这不是唯一的问题）

标签： html css

【解决方案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 类上，正如其他人指出的那样。

【讨论】：

是的，但是250+2*5 + 250+2*10 == 530
哦，哎呀，我忘了边界在两边。顺便说一句，计算将是250+2*10 + 250+2*10 == 540。但是，由于某些原因，更新它仍然不能解决问题。
啊，是的，我看到了错误的边距；）你是对的，还有更多问题。
大声笑，这开始看起来像是某种“找不同”的游戏：D
差不多了，只有 250+2*10 + 250+2*10 == 540。

【解决方案2】：

您还需要浮动.well-car：

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

【讨论】：

【解决方案3】：

您只需将 float: left; 添加到带有“well-car”类的 div 中。

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

【讨论】：

【解决方案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;
}

【讨论】：