2016-04-13 11 views
0

私は応答性の問題を抱えています。ページを絞り込むたびに、右側のdivは左側のdivに衝突します。 1つは写真の後ろに、もう1つは段落に入る。それはあふれているようだ、なぜか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>

+1

jsFiddleまたはスタックスニペットに私たちのために問題を再現するために役立つだろう!詳細については、[MCVEページ](http://stackoverflow.com/help/mcve)を参照してください。 –

+1

なぜ '.list-group div {height:200px; } 'ルール?それはあなたの問題を引き起こしているし、 '.list-group'の下のすべてのdivを200pxの高さにするのは本当に悪い考えです。 'height:200px'を持つ' .pic'だけのデモです:http://www.bootply.com/XPazS0ncGK –

答えて

3

高さ

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

イメージを 'img'要素に移動するか、高さを' .pic'にする必要があります。 –

1

を削除私はjsFiddleにあなたのコードを入れて、いくつかのCSSを削除し、問題を修正しているようです。

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

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

関連する問題