html - 如何阻止div重叠到图像？

Question

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

这张图说明了问题:

这是我在 JSFiddle 中的代码

.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;
}

<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

好吧，如果不知道容器类和行类是什么样子，就很难说出到底是什么原因造成的，但我猜您正在使用 Bootstrap ？无论如何，您的新闻内容类是内联 block ，而您的 h3 元素类是 block 元素，因此 block 元素不会与您的内联元素内联。您需要将两个元素都设为内联，以便它们对齐。看起来您的视口(viewport)大小也相当小，因此如果您没有在 .news-content 类上指定宽度，则 div 将调整大小以适合图像。

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