Question

我正在尝试在表单旁放置两个图像，并使用骨架css使其响应：

    <div class="row">
        <div class="five columns">
            <form id="sign-up-form">
                <div class="row">
                    <label for="signUpUsernameInput">Username</label>
                    <div class="input-wrapper">
                        <img src="/images/icons/user.png">
                        <input type="text" name="username" class="u-full-width" id="signUpUsernameInput">
                    </div>
                </div>
                <div class="row">
                    <label for="signUpEmailInput">Email</label>
                    <div class="input-wrapper">
                        <img src="/images/icons/mail.png">
                        <input type="text" name="email" class="u-full-width" id="signUpEmailInput">
                    </div>
                </div>
                <div class="row">
                    <label for="signUpPasswordInput">Password</label>
                    <div class="input-wrapper">
                        <img src="/images/icons/password.png">
                        <input type="password" name="password" class="u-full-width" id="signUpPasswordInput">
                    </div>
                </div>
                <label id="agree-terms">
                    <div class="row">
                        <input type="checkbox">
                        <span class="label-body">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></span>
                    </div>
                </label>
                <div class="row">
                    <button id="sign-up-button-green-large" class="u-full-width">Sign Up</button>
                </div>
            </form>
        </div>
        <div class="seven columns">
            <div class="row">
                <div class="six columns">
                    <img src="/images/box.png">
                </div>
                <div class="six columns">
                    <img src="/images/box.png">
                </div>
            </div>
        </div>
    </div>

这是普通桌面100％缩放时的样子：

然后当我在某一点缩小它时，框重叠：

这些方块也被推到了div之外：

最终他们正常崩溃： JSFiddle：https://jsfiddle.net/473vac9x/2/

当我调整浏览器大小时，如何使框不重叠并被推到div之外？非常感谢！

Answer 1

您可以通过以下两种方式解决此问题。

您可以将类：“u-max-full-width”添加到图像中，如下所示：

<img class="u-max-full-width" src="path/to/image/here" />

或者您可以在样式表中定义图像max-with，如下所示：

img {
  max-width: 100%;
  height: auto;
}

骨架css列重叠

1 个答案: