logo标签列表

使两个fieldset高度相同。

htmlcss
3
我有两个<fieldset>在一个单独的
里（没有其他内容），它们彼此相邻（position: absolute，div设置为relative）。
有没有办法使这些
具有相同的高度而不设置固定高度？
我有一些想法，也许我可以使它们都具有父元素的最大高度和自动的最小高度？
另外，是否可能使
中的内容垂直居中？
我不关心它是否适用于IE，但需要在Firefox和Webkit上工作，并且如果可能的话，在Opera上工作。
谢谢
编辑：您可以在此处查看页面：https://dl.dropbox.com/u/2318402/SO/login.html
请查看@Luis的CSS示例： https://dev59.com/g2gv5IYBdhLWcg3wMNwU#10906526 - ZoharAdar
3个回答
3

我有点晚了，但你总可以使用表格（虽然我也不喜欢表格，但在这种情况下表格是可行的）。

<table>
  <tr>
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
  </tr>
</table>
3
您可以将它们放在父容器中，如表格或 div 中，并使两个子元素的高度为 height=100%。
唯一的其他两个选项是您不想要的，即固定高度，如 height=59px，或者可以通过 JavaScript 完成。
对于垂直定位，您可以将它们放入父容器中，如表格或 div，然后添加 vertical-align:center。
两种方法都没有奏效，height:100%使得盒子变得比它们原来的高度还要短，而vertical-align:center则没有起到任何作用。如果有帮助的话，以下是页面内容链接：https://dl.dropbox.com/u/2318402/SO/login.html 谢谢！ - Jeffrey Aylesworth
vertical-align: center 不会实现你想要的效果。http://phrogz.net/css/vertical-align/index.html - Austin Fitzpatrick
由于似乎没有合适的解决方案，我将接受这个答案。 - Jeffrey Aylesworth
1

以下方法不需要使用js/jQuery，但是依赖于-在这个例子中-使用css3伪元素 :nth-of-type(odd)，不过这也可以通过为奇数个fieldset应用css类来替换。

它还依赖于对fieldset使用height: 100%，这本身取决于父元素（在这种情况下是form）有一个指定的高度。如果那是一个问题，那么为了演示目的，我已经在fieldset上使用了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。

如果您有任何问题或问题，请随时在评论中提出，我会尽力帮助您。 =)

你正在使用固定高度吗？我想避免这样做。 - Jeffrey Aylesworth
很抱歉，Jeffrey Aylesworth，如果一个子元素的高度以百分比来衡量（确保兄弟元素具有相等高度最不限制的方式），则必须指定父元素的高度。但是您可以使用JS使指定的高度更具动态性。 - David Thomas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接