Question

我在一个div（没有别的）里面有两个<fieldset> s，它们位于彼此旁边（positon：absolute，div设置为relative）。

有没有办法让这些场集在不设置固定高度的情况下都具有相同的高度？

我有一点想法，也许我可以让两者都有父母的最大身高，以及自动的最小身高？

此外，是否可以使字段集的内容垂直居中？

我不担心它是否适用于IE，但需要使用Firefox和Webkit，如果可能的话，Opera。

由于

修改：您可以在此处查看页面：https://dl.dropbox.com/u/2318402/SO/login.html

Answer 1

您可以将它们放在父容器（如表格或div）中，让两个孩子都在height=100%。

其他两个选项是你不想要的，在height=59px等固定高度，或者你可以通过javascript来完成。

对于垂直定位，您可以将它们粘贴在父容器（如表格或div）中，然后在那里拍打vertical-align:center

Answer 2

我有点迟了但是你总是可以使用表格（不管那些表格都不好......在这种情况下表格就可以了。）

<table>
  <tr>
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
  </tr>
</table>

Answer 3

以下工作，不使用js / jQuery，但依赖于-in这个例子 - 使用css3伪元素:nth-of-type(odd)，尽管这可以通过将css类应用于奇数字段集来替换

它还依赖于height: 100%用于fieldset，它本身依赖于具有指定高度的父元素（在本例中为form）。如果这是一个问题那么，为了演示，我在字段集上使用了overflow-y: auto;来将它们的维度限制为它们的父级，但是使用滚动行为来显示溢出。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />

    <style type="text/css" media="all">

        form        {
                width: 50%;
                height: 200px;
                }

        fieldset    {
                width: 30%;
                height: 100%;
                margin: 0 1em 0 0;
                padding: 0.5em 1em;
                overflow-y: auto;
                }

        fieldset:nth-of-type(odd)
                {
                float: left;
                }

        label       {
                display: inline-block;
                width: 30%;
                }

        input[type=text]
                {
                display: inline-block;
                width: 50%;
                }

    </style>
</head>

<body>

    <div id="wrap">

        <form enctype="form/multipart" method="post" action="">
            <fieldset>
                <label for="one">Label 1</label><input id="one" name="one" type="text" />
                <label for="two">Label 2</label><input id="two" name="two" type="text" />
            </fieldset>

            <fieldset>
                <label for="three">Label 3</label><input id="three" name="three" type="text" />
                <label for="four">Label 4</label><input id="four" name="four" type="text" />
                <label for="five">Label 5</label><input id="five" name="five" type="text" />
                <label for="six">Label 6</label><input id="six" name="six" type="text" />
            </fieldset>
        </form>

    </div>

</body>

</html>

在线演示： http://www.davidrhysthomas.co.uk/so/fieldsets.html。

显然，如果有任何问题或问题随意在评论中提出，我会尽力帮助你。 =）

使两个场集具有相同的高度

3 个答案: