1

我有两个这样的 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），我的问题是 div contact_details 显示在顶部，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;
}
4

4 回答 4

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%;
}
于 2013-10-05T18:35:42.273 回答
0

对我来说，它们排成一行。只有当窗口大小不足以容纳两者时，它们才会以垂直对齐方式显示。您可以给 parent-div 一个固定的宽度来避免这个问题。然后，如果窗口大小较小，则会显示滚动条。

于 2013-10-05T18:31:26.123 回答
0

我会这样做：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;

}

于 2013-10-05T18:40:31.403 回答
0

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

演示演示：inline-block

于 2013-10-05T18:43:05.197 回答