Question

我有一个基本的联系表格，我希望以较小的屏幕尺寸堆叠，并以较大尺寸的双列布局。

我的前三个标签和输入应该进入第一列，而我的textarea和附带的标签应该进入第二列。提交也应该低于textarea。

但出于某种原因，我的电子邮件字段出现在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 left或both来确保它们垂直堆叠，但是您无法浮动最终字段。我可能会做这样的事情（在你的断点内）：

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

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

我没有在那里使用你的确切课程，试图让它易于阅读。希望这是有道理的。 break是一个适用clear: both;的Susy mixin。这会浮动并将前三个字段堆叠到左侧。由于非浮动元素在浮动元素周围流动，因此最终字段自动向上移动 - 您只想将其向右推，因此它不会尝试重叠。

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

1 个答案: