2017-04-15 120 views
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 -->

回答

0

确保您不使用跨度为标题,他们需要的是块元素。我还将您的标题放在自己的行中,以便它与下面的内容保持独立。

另外,不要使用break标签来创建布局,他们并不清楚你的行和他们增加额外的空间,这是难以控制。

您的布局现在工作,你只需要理清标题和视频之间的间距:

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

 
<div class="container"> 
 
<div class="row"> 
 
    <!-- Title --> 
 
    <div id='win_text'> Ways to Win </div> 
 
</div> 
 
    
 
<div class='row' id='win_row'> 
 
    
 
    <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> 
 
    
 
    <!-- 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> 
 
</div> 
 
    
 
    <!-- Win Boxes -->

相关问题