3列形式，第3列垂直分布

debugcn 发表于 Dev

罗伯特

我正在尝试找到一种形式来水平显示字段而不是垂直显示字段..除了最后一列。我希望它垂直延伸。这是我按照自己希望的方式获取两列的代码：

    <html>
<head>
    <style type="text/css">
        .display-label, .editor-label
        {
            margin: 1em 0 0 0;
            display: block;
            width: 300px;
        }

        .display-field, .editor-field
        {
            margin: 0.5em 0 0 0;
            display: block;
            width: 300px;
        }

        .sameline-wrapper
        {
            float: left;
            display: inline;
        }

        .newline
        {
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <form action="test.html" method="post">
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a field:
                </div>
                <div class="display-field">
                    <input type="text" id="t1" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a second field:
                </div>
                <div class="display-field">
                    <input type="text" id="t2" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a third field:
                </div>
                <div class="display-field">
                    <input type="text" id="t3" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a fourth field:
                </div>
                <div class="display-field">
                    <input type="text" id="t4" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a fifth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text1" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a sixth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text2" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a seventh field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text3" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a eigth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text4" style="width: 100px;" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>

我现在要完成的工作是在左侧保留一个第三列，该列跨越其他行的整个高度。这个想法是在其中有一个textarea控件，而且看起来都很统一。我添加了此图像以帮助查看我要执行的操作：表格图片

这是一个小提琴：3列表格

我只是不知道如何使第3列与其他列对齐并与其他行（垂直）具有相同的高度。非常感谢您的帮助！

格里芬

重新排列您的html，以便为每一列指定一个div，如下所示：

<html>
<head>
    <style type="text/css">
        .newspaperCol
        {
            float: left;
            width: 33%;
        }

        .display-label
        {
            margin: 1em 0 0 0;
            display: block;
        }

        .display-field
        {
            margin: 0.5em 0 0 0;
            display: block;
        }
    </style>
</head>
<body>
    <div class="newspaperCol">
        <label class="display-label">Field 1:</label>
        <input class="display-field" type="text" id="text1">
        <br />
        <label class="display-label">Field 3:</label>
        <input class="display-field" type="text" id="text3">
        <br />
        <label class="display-label">Field 5:</label>
        <input class="display-field" type="text" id="text5">
        <br />
        <label class="display-label">Field 7:</label>
        <input class="display-field" type="text" id="text7">
    </div>
    <div class="newspaperCol">
        <label class="display-label">Field 2:</label>
        <input class="display-field" type="text" id="text2">
        <br />
        <label class="display-label">Field 4:</label>
        <input class="display-field" type="text" id="text4">
        <br />
        <label class="display-label">Field 6:</label>
        <input class="display-field" type="text" id="text6">
        <br />
        <label class="display-label">Field 8:</label>
        <input class="display-field" type="text" id="text8">
    </div>
    <div class="newspaperCol">
        <label class="display-label">Notes:</label>
        <textarea rows="17" cols="30" id="notestext"></textarea>
    </div>
</body>
</html>

编辑：我重新阅读了您的问题，并使用更多的原始代码更新了我的答案。我认为您缺少notes元素的一些HTML。尝试添加colLeft和colRight css类以及相关的“ div”元素，如下所示。

<html>
<head>
    <style type="text/css">
        .colLeft
        {
            float: left;
            width: 66%;
        }

        .colRight
        {
            float: left;
            width: 33%;
        }

        .display-label, .editor-label
        {
            margin: 1em 0 0 0;
            display: block;
            width: 300px;
        }

        .display-field, .editor-field
        {
            margin: 0.5em 0 0 0;
            display: block;
            width: 300px;
        }

        .sameline-wrapper
        {
            float: left;
            display: inline;
        }

        .newline
        {
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<form action="test.html" method="post">
    <div class="colLeft">
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a field:
                </div>
                <div class="display-field">
                    <input type="text" id="t1" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a second field:
                </div>
                <div class="display-field">
                    <input type="text" id="t2" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a third field:
                </div>
                <div class="display-field">
                    <input type="text" id="t3" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a fourth field:
                </div>
                <div class="display-field">
                    <input type="text" id="t4" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a fifth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text1" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a sixth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text2" style="width: 100px;" />
                </div>
            </div>
        </div>
        <div class="newline">
            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a seventh field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text3" style="width: 100px;" />
                </div>
            </div>

            <div class="sameline-wrapper">
                <div class="display-label">
                    Here is a eigth field:
                </div>
                <div class="display-field">
                    <input type="text" id="Text4" style="width: 100px;" />
                </div>
            </div>
        </div>
    </div>
    <div class="colRight">
        <label>Notes:</label>
        <textarea rows="15" cols="30" id="notestext"></textarea>
    </div>
</form>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。