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

그럼 정확히 알지 못하고 그 원인을 말할 어려운 것 컨테이너와 행 클래스는 비슷해 보이지만, 당신이 부를 사용하고있는 것 같아요. 헛소리? 어쨌든 당신은 뉴스 콘텐츠 클래스가 인라인 블록이고 h3 요소 클래스가 블록 요소이므로 블록 요소가 인라인 요소가 아닌 인라인 요소가되지 않습니다. 두 요소를 나란히 정렬해야 정렬 할 수 있습니다. 또한 뷰포트 크기가 매우 작아서 .news-content 클래스에서 너비를 지정하지 않으면 div가 이미지에 맞게 크기가 조정됩니다.

부트 스트랩을 사용하는 것처럼 보이므로 인라인 스타일을 사용하지 말고 부트 스트랩 그리드 클래스를 사용하지 않아야합니다. 당신은 중첩 행으로 - 행, 너무 오래 열이 12