Question

问题是我有一个不同大小不同字段的表单。每个字段都在一个div里面，浮动：左边。它们自动分配在2列中。如果它们都具有相同的高度，则没有问题，但如果不是，则会发生以下情况：

float:left problem

div以蓝色选择。我需要最后一个div例如，因为如果不是我在那里和我的网站的许多其他形式有死空间。它们是dinamic形式，所以我不能手动解决它。展示位置必须是自动的。我在Stack Overflow和互联网上搜索但我找不到任何解决方案。

以下是 Divs CSS

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

一般CSS

#popup{
    width:645px;
    height:auto;
    background-color:#e3e3e3;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    border-color:#afafaf;
    padding:15px;
    color:#4d4d4d;
}

#popup #titulo{
    font-size:15px;
    font-weight:bold;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#afafaf;
    padding-bottom:10px;
}

#popup #form #input{
    display:block;
    width:289px;
    margin-top:10px;
}

#popup #form .left{
    float:left;
    margin-left:25px;
    display:inline-block;
    vertical-align:top;
}

#popup #form .right{
    float:right;
    margin-right:25px;

}

#popup #form #input label{
    font-size:12px;
    font-weight:bold;
}

#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
    font-size:12px;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    width:280px;
    background-color:#f0f0f0;
}

#popup #form #input #foto{
    width:191px;
    height:87px;
    background-image:url(images/img_background.png);
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    border-radius:5px;
}

#popup #form input[type='button']{
    text-align:center;
    border-radius:5px;
    border-style:solid;
    border-width:1px;
    border-color:#afafaf;
    font-size:12px;
    color:#4d4d4d;

    -moz-box-shadow:    inset 1px 1px 1px #ffffff;
    -webkit-box-shadow: inset 1px 1px 1px #ffffff;
    box-shadow:         inset 1px 1px 1px #ffffff;
}

#popup #form #input input[type='button']{
    width:82px;
    height:17px;
    margin-left:4px;
    line-height:14px;
}

#popup #form #submit_buttons{
    text-align:right;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#afafaf;
    padding-top:10px;
    margin-top:15px;
}

#popup #form #submit_buttons input[type='button']{
    width:82px;
    height:30px;
}

#popup #form input[type='button']:hover{
    background-color:#cccccc;
    cursor:pointer;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#popup #form #input table{
    width:284px;
    margin-top:2px;
    margin-bottom:5px;
}

#popup #form #input table tr{
    text-align:right;
    vertical-align:top;
}

#datepicker{
    background-image:url(images/datepicker.png);
    background-repeat:no-repeat;
    background-position:right;
}

#popup #form #input textarea{
    height:115px;
    max-height:115px;
    min-height:115px;
    width:275px;
    max-width:275px;
    min-width:275px;
}

Answer 1

我提供了问题的简化版本，但很简单，可以继续您的示例。你只需要在左右之间交替浮动，这样它们就不会破坏：）

HTML代码：

<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>

CSS代码：

.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}

实例： http://jsfiddle.net/h4kE8/

Answer 2

我会尝试用这两个DIV投掷position:relative;。我发现通常可以通过设置清晰的位置属性来解决任何类型的定位问题。

使用position:absolute;来设置父级的位置时也很有帮助。如果这不起作用，请不要低估表格。人们可能不太喜欢它们，但是如果你知道如何使用它们，那么它们适用于这样的东西。

冗长，但我能给出最好的建议。

Answer 3

多列布局模块规范已存在很长时间了，但是浏览器的实现速度很慢，因此IE几乎肯定已经出局了（尽管可能有一个polyfill可以帮助它顺利进行）。

http://www.quirksmode.org/css/multicolumn.html

http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/

请注意，这会改变元素显示的顺序，但会消除差距。

Answer 4

我会在你的情况下将id，nombre和descripcion放在同一个div中，称之为div div。然后右边的其余内容坐在另一个div上调用右边div并让它们都向左浮动。如下

的CSS

.left { 
  float:left;
}
.right {
 float:left;
}

HTML 的

<div id="left">
/*id, nombre and descripcion */
</div>

<div id="right">
/* the rest */
</div>

垂直顶部对齐不同高度的2列div，浮动：向左

4 个答案: