#services divにはコンテンツがありますが、空のdivとして表示されます

私の#services divには内容がラップされていますが、表示するには境界線を表示するか、背景に空のdivが表示されます。ここのトリックは何ですか？スニペットでうまくいくように見えますが、表示される方法はここにあります：http://laszlovaszi.com/yoursite/。事前におねがいします！#services divにはコンテンツがありますが、空のdivとして表示されます

#services { 
 
\t border:1px solid red; 
 
\t margin-top:50px; 
 
\t background-color:#f1eee9; 
 
} 
 

 
#services p { 
 
\t margin-top:25px; 
 
} 
 

 
.separator2 { 
 
    width: 100%; 
 
    margin: 20px auto 15px; 
 
    position: relative; 
 
    height: 1px; 
 
\t background-color:#d3d3d3; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="services"> 
 
\t \t <div class="col-sm-8 col-sm-offset-2 text-center"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <h1>Our Team</h1> 
 
\t \t \t \t <div class="separator2"></div> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </row> 
 
\t \t </div> 
 
\t </div>

出典

2016-05-13 sklrboy

いくつかのhtmlエラーがあります。ここで確認してください：https://validator.w3.org/nu/?doc=http%3A%2F%2Flaszlovaszi.com%2Fyoursite%2F。それらを修正し、それは正常に動作するはずです。 – andreivictor

エラーは修正されましたが、divは空のままです。しかし、私は、オーバーフロー：隠された問題を解決することを思い出しました。固定サイズを設定していないことを知っている理由は何でしょうか？ – sklrboy

（</div>に</row>タグを修正）あなたのマークアップを修正した後、私はあなたのラッピング#servicesのdivが浮いて子供のために崩壊しているように見える気づきました。以下のようにそれにclearfixクラスを追加します。

#services { 
 
\t border:1px solid red; 
 
\t margin-top:50px; 
 
\t background-color:#f1eee9; 
 
} 
 

 
#services p { 
 
\t margin-top:25px; 
 
} 
 

 
.separator2 { 
 
    width: 100%; 
 
    margin: 20px auto 15px; 
 
    position: relative; 
 
    height: 1px; 
 
\t background-color:#d3d3d3; 
 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
/** 
 
* For IE 6/7 only 
 
* Include this rule to trigger hasLayout and contain floats. 
 
*/ 
 
.cf { 
 
    *zoom: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="services" class="cf"> 
 
    <div class="col-sm-8 col-sm-offset-2 text-center"> 
 
    <div class="row"> 
 
     <h1>Our Team</h1> 
 
     <div class="separator2"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

あなたが今わかります、#services divが（それだけで2ピクセルの高さを持っていた前に、原因の国境に）その高さが復活しています。

Clearfixマイクロハック：http://nicolasgallagher.com/micro-clearfix-hack/

さらに詳しい情報：What is a clearfix?

出典

2016-05-13 10:34:37

パーフェクト。それは愚かな疑問かもしれないが、なぜそれが子供たちを浮かべているためにdivの崩壊は起こるのだろうか？私は、オーバーフロー：浮動小数点：左はこの問題も解決することを認識しましたが、理由とその理由は何かを理解することはできません。ありがとう！ – sklrboy

@LászlóVaszi心配する必要はありません。フローティング要素は、基本的にWebページの通常の「フロー」から削除されます。なぜなら、例えば、ある要素の前にDOM内の要素を持つことができますが、その要素の後に（浮動小数点で）表示させるのはなぜですか？このタイプの遊園地のために、彼らは技術的に属している親は高さがありません。私がこれまで以上に良いことを説明する良い記事は：http://www.impressivewebs.com/clearing-floats-why-necessary/ –

あなたは、あなたがしたい場合にも、あなたがwidth属性を追加することができますので、

#services { 
border:1px solid red; 
margin-top:50px; 
background-color:#f1eee9; 
float:left; 
width:100%: 
}

達成するためにfloatプロパティを使用する必要があります。

出典

2016-05-13 10:35:45

#services divにはコンテンツがありますが、空のdivとして表示されます

答えて

関連する問題