Question

我有两个这样的div： -

<div class="pdetails">

    <div class="contact_details">
    text
    </div>

    <div class="clear"></div>

    <div id="contact_area_form_" class="tform_wrapper">
    text
    </div>

    </div>

父div是pdetails，它有两个div（contact_details，tform_wrapper），我的问题是top contact_details显示在top中，div tform_wrapper显示在底部。

如何在同一行中设置这两个div。

css代码： -

.tform_wrapper {
    float: left !important;
    padding-top: 10px;
    width: 510px;
}

.pdetails {
    color: #000000;
    font-family: tahoma;
    font-size: 12px;
    line-height: 18px;
    margin-top: 20px;
    min-height: 360px;
    text-align: justify;
}

.contact_details {
    float: right;
}

Answer 1

删除具有“clear”类的div或使用display：none隐藏它。

<div class="pdetails">
    <div class="contact_details"> text </div>
    <div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>

或使用％值的宽度。

.tform_wrapper {
    float: left !important;
    padding-top: 10px;
    width: 80%;
}

Answer 2

对我来说，他们出现在一条线上。只有当窗口大小不足以使它们都适合时，它们才会以垂直对齐方式显示。你可以给parent-div一个固定的宽度来避免这个问题。然后，如果窗口尺寸较小，则会显示滚动条。

Answer 3

我会这样：http://jsfiddle.net/Ewyzt/

介于两者之间的明确之处就是那个说不能在这条线上更多的人并将另一个盒子向下推到你想要做的事情是在最后一个盒子之后清除所以你可以在两个第一个盒子之后建立，否则事情将开始浮动你除了他们。

.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;

}

.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;

}

.contact_details {
float:left;

}

Answer 4

我建议使用display: inline-block;属性而不是float

Demo for display: inline-block

如何在一行中显示两个div

4 个答案: