骷髏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/

如何讓我的箱子不重疊，被推股利外，當我調整瀏覽器？非常感謝！

Answer 1

您可以通過以下兩種方式之一解決這個問題。

您可以添加類：「U-MAX全寬」的相似圖片：

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

或者你可以在樣式表中定義圖像MAX-，象這樣：

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