0
このコードは本当に混乱しています。私は複数のdivの上にテキスト "勝つための方法"を持っています。問題は、テキストがdivのフローを妨害していることです。しかし、私がBootstrap列からテキストを削除した場合、それは反応しなくなり、残りのdivと共に流れます。divより上のテキストにBootstrap列を正しく使用する方法は？
他のdivとの間でテキストフローを正しく作成するにはどうしたらいいですか？また、その下のdivを中断しないでください。
/* Ways to Win */
#win_text {
font-size: 20px;
position: relative;
font-weight: bold;
position: relative;
}
.win_box {
position: relative;
top: 50px;
height: 110px;
width: 196px;
border: 1px solid #C0C0C0;
border-bottom: none !important;
display: inline-block;
margin-bottom: 50px !important;
}
#video {
font-size: 45px;
color: white;
text-align: center;
vertical-align: middle;
position: relative;
top: 28px;
left: 80px;
text-shadow: 0px 0px 3px #353535;
}
.win_box:hover .description {
border: 1px solid #2A6496;
}
.win_box:hover {
border: 1px solid #2A6496;
}
.description {
position: relative;
top: 63px;
left: -1px;
padding: 5px;
border-top: none !important;
border: 1px solid #C0C0C0;
width: 196px !important;
}
.win_link {
text-decoration: nonew !important;
font-weight: bold !important;
text-decoration: none !important;
}
#win_row {
max-width: 1550px;
}
/* End of Ways to Win */<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Ways to Win -->
<br>
<div class='row' id='win_row'>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<!-- Title -->
<span id='win_text'> Ways to Win </span> <br>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<!-- BREAK -->
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-2" id='title'>
<a href='#' class='win_link'> <div class='win_box' style='background: url("https://i.ytimg.com/vi/8sME-VxUQQA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=EgyGW3D0KWyu5ei-2aUz8FPI_Jc");'> <i class="fa fa-play" aria-hidden="true" id='video'></i>
<div class='description'> Earn 5 Points </div>
</div> </a>
</div>
</div>
<!-- Win Boxes -->