使用Susy 2在断点创建两列窗体布局

Question

我有一个基本的联系形式，我希望有一个较小的屏幕大小堆叠，两列布局在更大的尺寸。

我的前三个标签和输入应该进入第一列，而我的textarea和伴随的标签应该进入第二列。提交也应该在文本区域下面。

但出于某种原因，我的电子邮件字段出现在文本区域上方，尽管我认为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浮点数用于这样的事情，所以不能做任何浮子不能做的事情。当您有三个项目在一列，左浮动50%，它们将首先堆叠在一起。您可以通过添加clear of left或both来修正这一点，以确保它们垂直堆叠，但是不能浮动最后的字段。我可能会这样做(在您的断点内)：

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

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

我没有用你的准确的课程，试图使它容易阅读。希望这是合理的。break是一个应用clear: both;的Susy混音。它向左浮动并堆叠前三个字段。由于非浮动元素在浮动元素周围流动，最后的字段会自动向上移动--您只想把它推到正确的位置，这样它就不会试图重叠。