4

问题是我有一个具有不同大小的不同字段的表单。每个字段都在一个带有 float:left 的 div 内。它们会自动分布在 2 列中。如果它们的高度相同，则没有问题，但如果不是，则会发生以下情况：

浮动：左问题

div 以蓝色选择。例如，我需要最后一个 div 上升，因为如果没有，我在那里以及我网站的许多其他形式中都有一个死区。它们是动态形式，所以我无法手动解决。放置必须是自动的。我在 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;
}
4

4 回答 4

2

我提供了问题的简化版本，但足够简单，可以继续您的示例。你只需要在左右交替浮动，这样它们就不会中断:)

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/

于 2013-04-18T23:22:26.010 回答
0

多列布局模块规范已经存在很长时间了，但是浏览器实现起来很慢，所以 IE 几乎肯定会被淘汰（尽管可能有一个 polyfill 可以帮助它继续前进）。

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

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

请注意，这将更改元素显示的顺序，但会消除间隙。

于 2012-09-12T22:51:41.993 回答
0

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

在使用position:absolute;它的父位置设置时也有帮助。如果这不起作用，请不要低估表格。人们可能不太喜欢它们，但如果你知道如何使用它们，它们就可以很好地处理这样的事情。

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

于 2012-09-12T22:43:30.243 回答
0

在你的情况下，我会将 id、nombre 和 descriptcion 放在同一个 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>
于 2013-09-18T08:00:11.257 回答