Wie div von der Überlappung zum Bild zu stoppen?

Question

Ich habe ein Problem mit einem div und Bilder, sie überschneiden sich sogar, wenn es Inhalt in der Div. Ich verwende Bootstrap für das Grid-System.

Dieses Bild zeigt das Problem:

in JSFiddle meinen Code Hier ist

.news-section { 
 
\t height: 500px; 
 
\t background-color: #F1EFEF; 
 
} 
 
.news-title { 
 
\t margin-top: 50px; 
 
\t height: 60px; 
 
\t background-color: #4A90E2; 
 
\t display: inline-block; 
 
\t text-align: center; 
 

 
} 
 
.news-title > h3 { 
 
\t vertical-align: middle; 
 

 
} 
 
.videos-title { 
 
\t margin-top: 50px; 
 
\t height: 60px; 
 
\t 
 
\t background-color: #3F444A; 
 
\t color: #fff; 
 
\t display: inline-block; 
 
\t text-align: center; 
 
} 
 
.videos-title > h3 { 
 
\t vertical-align: middle; 
 
} 
 
.news-content { 
 
\t margin-top: 25px; 
 
\t display: inline-block; 
 
} 
 
.videos-content { 
 
\t margin-top: 25px; 
 
\t display: inline-block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet"/> 
 
<section> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="news-section"> 
 
        <div class="col-md-6 col-xs-12 news-title"> 
 
         <h3>Lo más nuevo</h3> 
 
         <div class="news-content"> 
 
          <img class="img-responsive" src="http://placehold.it/500x400" alt="" >  
 
         </div>     
 
        </div> 
 
        <div class="col-md-6 col-xs-12 videos-title"> 
 
         <h3>Nuestros videos más nuevos</h3> 
 
         <div class="news-content"> 
 
          <img class="img-responsive" src="http://placehold.it/500x400" alt="" >  
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 1

Kontrolle dieses fiddle

<section> 
    <div class="container"> 
    <div class="row"> 
     <div class="news-section"> 
     <div class="col-md-6 col-xs-12"> 
      <h3 class=" news-title">Lo más nuevo</h3> 
      <div class="news-content"> 
      <img class="img-responsive" src="http://placehold.it/500x400" alt=""> 
      </div> 
     </div> 
     <div class="col-md-6 col-xs-12"> 
      <h3 class="videos-title">Nuestros videos más nuevos</h3> 
      <div class="news-content"> 
      <img class="img-responsive" src="http://placehold.it/500x400" alt=""> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

    .news-section { 
    background-color: #F1EFEF; 
    } 

    .news-title { 
    margin-top: 50px; 
    height: 60px; 
    background-color: #4A90E2; 
    display: inline-block; 
    text-align: center; 
    width: 100%; 
    } 

    .news-title > h3 { 
    vertical-align: middle; 
    } 

    .videos-title { 
    margin-top: 50px; 
    height: 60px; 
    width: 100%; 
    background-color: #3F444A; 
    color: #fff; 
    display: inline-block; 
    text-align: center; 
    } 

    .videos-title > h3 { 
    vertical-align: middle; 
    } 

    .news-content { 
    margin-top: 25px; 
    display: block; 
    } 

    .news-content img { 
    margin: auto; 
    } 

Answer 2

Nun, es ist schwer zu sagen, was genau es verursacht wird, ohne zu wissen, was Die Container- und Zeilenklassen sehen aus, aber ich vermute, dass Sie mit boo arbeiten T-Shirt? Auf jeden Fall sind Sie news-content-Klasse ist Inline-Block und Ihre h3-Element-Klasse ist ein Block-Element, so dass das Block-Element nicht inline mit Ihrem Inline-Element sein wird. Sie müssen beide Elemente aneinanderreihen, damit sie in einer Linie stehen. Es sieht auch so aus, als ob die Größe des Darstellungsbereichs ziemlich klein ist. Wenn Sie also keine Breite für Ihre .news-content-Klasse angeben, wird die Größe des Bereichs an das Bild angepasst.

Da es so aussieht, als ob Sie Bootstrap verwenden, sollten Sie die Verwendung von Inline-Stilen vermeiden und die Bootstrap-Gitterklassen verwenden. Sie können Nest Reihen mit in Reihen, so lange, wie die Spalten gleich 12