logo标签列表

左浮动：垂直上下对齐两个高度不同的二列div

htmlcsscss-float
4
问题在于我有一个表单，其中包含不同大小的不同字段。每个字段都在一个带有float:left的div中。它们自动分布在2列中。如果它们的高度都相同，那么就没有问题，但如果不是，就会出现以下问题：
图像中选中的div为蓝色。例如，我需要最后一个div向上移动，否则我就会有一个死区，以及我的网站中的许多其他表单。它们是动态表单，因此我无法手动解决它。放置必须是自动的。我在Stack Overflow和互联网上搜索，但找不到任何解决方案。
这是
的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;
}
你需要2列。你愿意使用JavaScript将它们放入正确的列中吗？ - bhamlin
它们是动态表单，所以最好的事情是它们会自动定位。我知道如何用JavaScript或PHP解决它，但我必须计算每个div/input的高度，并进行一些数学计算，以知道要放置每个元素的位置。如果我可以用简单的CSS解决它，那将是理想的事情。 - Jonathan Calb
我不确定我理解为什么你需要进行数学计算。你只需要迭代每个部分并将其放置在交替的列中。如果你担心一列变得太大，那么这是一个更复杂的问题。如果你希望 CSS 会神奇地为你解决这个问题……它不会。 - bhamlin
我认为不行，但这将是很好的。希望有一天CSS可以解决这种问题，那将是理想的。是的，我必须进行数学计算，因为我有不同高度大小的divs/inputs。想象一下，左边有3个简单小的输入框，右边有另外三个巨大的输入框，那将是可怕的。 - Jonathan Calb
1
我希望有一个插件或类似的东西可以做到这一点。如果没有，我会尝试自己去实现并分享给大家。毕竟，我不是唯一一个为此感到头疼的人。 - Jonathan Calb
请查看此解决方案：https://dev59.com/-2gu5IYBdhLWcg3wUlft - Rutger van Baren
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;}

Live example: http://jsfiddle.net/h4kE8/

0
我建议您将id、nombre和descripcion放在同一个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>
0

我建议在这两个DIV中加入position:relative;。我发现任何一种定位问题通常都可以通过设置清晰的位置属性来解决。

当使用position:absolute;时，设置其父元素的位置也会有所帮助。如果这样做不起作用，请不要低估表格。人们可能不太喜欢它们，但如果您知道如何使用它们，它们对于此类事情非常有效。

虽然有些冗长，但这是我能给出的最好建议。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接