divからイメージへdivを停止する方法は？

Question

私はdivと画像に問題があり、div内にコンテンツがある場合でも重なっています。私はグリッドシステムにブートストラップを使用しています。

この絵は、問題を示しています。

はここJSFiddle

.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

チェックこの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

での私のコードは、まあ、それは何を知らなくても、それを引き起こしている、まさに言うのは難しいですコンテナと行クラスは同じように見えますが、私はあなたがブーを使用していると推測していますtstrap？いずれにしても、ニュースコンテンツクラスはインラインブロックで、h3要素クラスはブロック要素なので、ブロック要素はインライン要素とインラインではありません。あなたが整列するためには、両方の要素をインラインにする必要があります。また、ビューポートのサイズがかなり小さいように見えるので、.news-contentクラスに幅を指定しないと、divは画像に合わせてサイズが変更されます。

ブートストラップを使用しているように見えるので、インラインスタイルを使用したり、ブートストラップグリッドクラスを使用したりしないでください。あなたは、私はそれを修正する方法を研究するために、問題を再現するように見えることができない限り、12に等しい列などと-内の行巣行、