私はdivと画像に問題があり、div内にコンテンツがある場合でも重なっています。私はグリッドシステムにブートストラップを使用しています。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>
をすることができます。あなたは問題にjsfiddleを提供できますか? – Tapu
問題の原因となったものがcol-xs-12の 'float:left'であることが検出されましたが、デスクトップバージョンに影響を与えずに削除する方法はわかりません。 –