爲什麼div碰撞？

我有響應問題。每當我縮小頁面時，右側的div碰撞到左側的div上。一個落在圖片後面，另一個落在段落後面。這似乎是溢出，idk爲什麼。爲什麼div碰撞？

.list-group { 
 
    margin: 0 auto; 
 
} 
 

 
.list-group div { 
 
    background-color: ; 
 
    height: 200px; 
 
} 
 

 
.list-group h3 { 
 
    color: #175C85; 
 
} 
 

 
.list-group .pic { 
 
    background-image: url(../images/AdobeStock_52854917_WM.jpeg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    border-radius: 4px; 
 
    margin-right: 50px; 
 
    margin-left: 30px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class=" list-group col-sm-12 col-md-10"> 
 
     <div class="row"> 
 
      <div class="col-sm-6"> 
 
      <h3>One All-Inclusive Fee</h3> 
 
      <p>There are no hidden fees or additional charges when working with Nevada Corporate Headquarters, Inc. (NCH). There is one initial fee and it includes the entire process. NCH pays for all initial state filings, account set up fees and expedite 
 
       services for both. NCH gives you one all-inclusive fee—one time; an offer unmatched by our competitors.</p> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
      <h3>One-Stop Shop</h3> 
 
      <p>NCH will facilitate the entire process from start to finish—your one-stop solution. This includes, but is not limited to, creating the entity, entity documents, new retirement account(s), rollovers, transfer of the investment(s) into your entity—all 
 
       performed and produced by NCH.</p> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-6 img-div"> 
 
      <div class="pic"> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
      <h3>Limit Your Ongoing Custodial Fees</h3> 
 
      <p>NCH’s fee schedule is simple. There are no transactional fees after the Self-Directed structure has been completed. After the first year, the ongoing maintenance fees are limited, regardless of the size of your account. Through NCH’s process 
 
       you will not be penalized as the value of your retirement account increases.</p> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-6"> 
 
      <h3>Experience and Thoroughness</h3> 
 
      <p>NCH has established thousands of self-directed retirement accounts, helping individuals take advantage of potentially more secure and more lucrative investments for their retirement. We facilitate the implementation of all documents, ensuring 
 
       that all requirements have been met and you maintain full signature authority on behalf of your self-directed retirement account. With over 25 years of experience, our systematic approach has proven to be effective and timely, putting you 
 
       in control as quick as possible.</p> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
      <h3>Ongoing Education and Coaching</h3> 
 
      <p>Once your new structure is in place, questions will most certainly arise. NCH provides ongoing coaching and education via email or our toll-free hotline, to help guide you through the first six months of implementation. Unlike most of our competition, 
 
       NCH employs and trains a knowledgeable self-directed staff. Regardless of the questions you have—they are simply an email or phone call away from being answered.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-04-13 Jacob Bradley

這將有助於重現問題我們在的jsfiddle或堆棧片段！有關詳細信息，請參見[MCVE頁面]（http://stackoverflow.com/help/mcve）。 –

爲什麼'.list-group div {height：200px; '規則？這是什麼導致你的問題，這使得'.list-group'下的每個div都是200px高，這似乎是一個非常糟糕的主意。下面是一個只有'.pic'具有'height：200px'的演示：http://www.bootply.com/XPazS0ncGK –

刪除高度

.list-group div { 
background-color: ; 
/* height: 200px; */ 
}

來源

2016-04-13 16:51:00

也應該將圖像移動到一個'img'元素或給'.pic'一個高度。 –

我把你的代碼放到一個的jsfiddle並刪除一些CSS，它似乎已經解決了這一問題。

.list-group div{ 
    background-color:; 
    //height: 200px; 
}

https://jsfiddle.net/DTcHh/19303/

來源

2016-04-13 16:56:24

爲什麼div碰撞？

回答

相關問題