如何阻止div重叠到图像？

Question

我有div和图像的问题，即使div中有内容，它们也会重叠。我正在为网格系统使用bootstrap。

此图片说明了问题：

这是我在JSFiddle中的代码

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在不知道容器和行类是什么样子的情况下，很难说出究竟是什么导致它，但我猜你在使用bootstrap？无论如何，你是新闻内容类是内联块，你的h3元素类是一个块元素，所以block元素不会与你的内联元素内联。您需要将两个元素内联，以便它们排成一行。它看起来像你的视口大小相当小，所以如果你没有在.news-content类上指定宽度，那么div将调整大小以适合图像。

由于看起来您正在使用Bootstrap，因此应避免使用内联样式并使用Bootstrap网格类。只要列等于12，就可以在行中嵌套行。

Answer 2

检查此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;
  }