Question

我正在尝试找到一种方法，使表格能够水平而不是垂直显示字段....除了最后一列。我希望它能垂直跨越。以下是我按照我喜欢的方式获取2列的代码：

    <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控件，它看起来都很均匀。我已添加此图片以帮助查看我正在尝试执行的操作： Form Image

这是一个小提琴： 3 Column Form

我只是不知道如何让第3列与其他列的左边对齐，并且与其他行的高度（垂直）相同。任何帮助都非常有用！

Answer 1

重新排列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>

修改我重新阅读了您的问题并使用更多原始代码更新了我的答案。我认为你缺少一些注释元素的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>

3列形式，第3列垂直跨越

1 个答案: