html - 骨架 css 列重叠

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" />

或者您可以像这样在样式表中定义图像最大宽度:

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