css - 使用 Susy 2 在断点处创建两列表单布局

Question

我有一个基本的联系人表单，我希望它在较小的屏幕尺寸下堆叠，在较大的屏幕尺寸下采用两列布局。

我的前三个标签和输入应该放在第一列，而我的文本区域和附带的标签应该放在第二列。提交也应位于文本区域下方。

但出于某种原因，我的电子邮件字段出现在文本区域上方，尽管我认为 CSS 应该如此规定。

这是我的 HTML:

    <form method="post" class="uniForm">

    <div id="div_id_name" class="ctrlHolder">

            <label for="id_name" class="requiredField">
                Your name<span class="asteriskField">*</span>
            </label>

            <input class="textinput textInput" id="id_name" maxlength="100" name="name" type="text" />

    </div>

    <div id="div_id_email" class="ctrlHolder">

            <label for="id_email" class="requiredField">
                Your email address<span class="asteriskField">*</span>
            </label>

            <input class="emailinput" id="id_email" maxlength="200" name="email" type="email" />

    </div>

    <div id="div_id_phone" class="ctrlHolder">

            <label for="id_phone" >
                Phone number
            </label>

            <input type="tel" name="phone" placeholder="555-555-5555" class="phonenumberinput" id="id_phone">

    </div>

    <div id="div_id_body" class="ctrlHolder">

            <label for="id_body" class="requiredField">
                Your message<span class="asteriskField">*</span>
            </label>

            <textarea class="textarea" cols="40" id="id_body" name="body" rows="10">
</textarea>

    </div>

        <input type="submit" value="&#x25b6; Submit">
    </form>

这是我的 SCSS:

$susy: (
    columns: 1,
    gutters: 1/8,
    gutter-position: inside,
    //global-box-sizing: border-box,
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    ),
);

$desktop: layout(auto 2 1/8 inside);

$md_desktop: 970px;

section#contact {
    @include span(1);
    margin-bottom: 25px;

    h2 {
        font-family: $oswald_font;
        text-transform: uppercase;
        color: $red;
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 25px;
        letter-spacing: 2px;
    }

    p {
        font-family: $oswald_font;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.7em;
        margin-bottom: 15px;
    }

    form {
        margin-top: 25px;
        margin-bottom: 25px;

        @include breakpoint($md_desktop) {
            @include layout($desktop);
            @include container(show);
        }

        label {
            text-transform: uppercase;
            font-family: $oswald_font;
            font-weight: 400;
            display: block;
            margin: 10px 0;
            font-size: 14px;
            letter-spacing: 1px;
        }

        input {
            height: 25px;
        }

        input, textarea {
            display: block;
            width: 100%;
            background-color: $blue;
            border: 1px solid #DDD;
            color: white;

            &:focus {
                border: 1px solid rgba(247,220,112,1);
                box-shadow: 0 0 5px rgba(247,220,112,1);
                outline: none;
            }
        }

        #div_id_name, #div_id_email, #div_id_phone  {

            @include breakpoint($md_desktop) {
                @include span(1 of 2);
            }
        }

        #div_id_body {

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }

        input[type="submit"] {
            @include clearfix;
            font-family: $oswald_font;
            cursor: pointer;
            letter-spacing: 4px;
            float: right;
            width: 50%;
            background-color: red;
            border: none;
            color: white;
            text-transform: uppercase;
            font-size: 16px;
            padding: 0;
            margin-top: 25px;

            &:hover {
                background-color: darken($red, 5%);
            }

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }
    }
}

Answer 1

Susy 只是将 CSS float 用于类似这样的事情，因此不能做任何 float 不能做的事情。当你有三个连续的元素时，向左浮动 50%，它们将首先堆叠在一起。您可以通过添加 left 或 both 的 clear 来解决此问题，以确保它们垂直堆叠，但您无法 float 最终字段.我可能会做这样的事情(在你的断点内):

.name,
.email,
.phone {
  @include span(1 of 2);
  @include break;
}

.message {
  @include push(1 of 2);
}

我没有在那里使用您的确切类(class)，试图使其易于阅读。希望这是有道理的。 break 是一个应用 clear: both; 的 Susy mixin。这会将前三个字段 float 并堆叠到左侧。由于非 float 元素围绕 float 元素流动，final 字段会自动向上移动 — 您只需将它推到右侧，这样它就不会尝试重叠。