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浏览器如何计算块元素＆＃39;尺寸）

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

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

Answer 2

您还需要浮动<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8"> <form action="{% url 'DeleteView' article.id %}" method="POST"> {% csrf_token %} <input type="hidden" value="{{ article.views.id }}"> <input type="submit" value="Delete"> </form> </div>：

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

Answer 3

您只需要将 float：left; 添加到您的div中，然后使用＆＃34; well-car＆＃34;。

.well-car

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;
}

两个div类并排

4 个答案: