Html 3柱形式，第3柱垂直跨越_Html_Css

Html 3柱形式，第3柱垂直跨越

html css

Html 3柱形式，第3柱垂直跨越,html,css,Html,Css,我试图找到一种方法，使表单水平而不是垂直地显示字段……最后一列除外。我希望它能垂直延伸。以下是按我希望的方式获取这两列的代码： <html> <head> <style type="text/css"> .display-label, .editor-label { margin: 1em 0 0 0; display: block; wid

我试图找到一种方法，使表单水平而不是垂直地显示字段……最后一列除外。我希望它能垂直延伸。以下是按我希望的方式获取这两列的代码：

    <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控件，它看起来都是统一的。我添加了此图像以帮助了解我正在尝试做什么：

这是一把小提琴：

我只是不知道如何让第三列与其他行的左侧对齐，并与其他行的垂直高度相同。非常感谢您的帮助

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

我在你的JSFIDLE中只看到一列。@FranciscoCorrales真的吗？这很奇怪……我一直在研究它，但我没有删除任何列……请尝试以下链接：@FranciscoCorrales-可能是因为JSFIDLE中的窗格不够宽。我只是把我的输出窗格移到右边，注意到它使它看起来像是一列。尝试将拆分器向左移动。谢谢，这非常有效。你说得对，我遗漏了Notes字段的html，因为我所做的工作不起作用，我不想让任何人混淆Notes字段所需的位置。