我在我的网站上设置了标签部分,一切正常。问题在于标题不会位于图像下方。以下是代码片段和图片,以便您查看问题。
<div class="container">
<div class="row">
<div class="col-lg-12">
<!--- Tabs Navagation
---------------------------->
<ul class="nav nav-tabs" id="tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Cities</a></li>
<li><a href="#tab2" data-toggle="tab">Education</a></li>
<li><a href="#tab3" data-toggle="tab">Restaurants</a></li>
</ul>
<!--- Tab Sections
---------------------------->
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="thumb-caption">
<a href="#"><img src="app/img/tabs/Belo Horizonte.jpg" alt="..."></a>
<caption align="bottom">Belo Horizonte</caption>
</div>
<a href="#"><img src="app/img/tabs/Brasília (2).JPG" alt="..."></a>
<a href="#"><img src="app/img/tabs/Cuiabá (2).JPG" alt="..."></a>
<a href="#"><img src="app/img/tabs/Curitiba.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Fernando de Noronha_2.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Fortaleza (1).jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Iguazu Falls.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/IlhaGrande_Praia Lopes Mendes.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Manaus- Amazonas.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Natal (3).jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Porto Alegre (3).jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Recife Antigo.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Rio de Janeiro.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/Salvador 3.jpg" alt="..."></a>
<a href="#"><img src="app/img/tabs/sao pablo.jpg" alt="..."></a>
</div>
<div id="tab2" class="tab-pane">
<img src="">
</div>
<div id="tab3" class="tab-pane">
<p>this is text of tab 3</p>
</div>
</div>
</div>
</div>
</div>
和CSS:
.tab-pane img {
max-width: 100px;
height: 100px;
padding: 10px;
float: left;
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
margin-bottom: 20px;
}
.tab-pane img:hover {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
所以,如果你们可以帮助我,那将是很棒的,因为我多年来一直在摸我的头,我知道它正盯着我的脸。
答案 0 :(得分:0)
如果你测试
.thumb-caption {
border: 1px solid red;
}
你会看到为什么标题的行为与它一样。浮动img旁边有足够的空间。
会像
.thumb-caption {
width: 120px;
}
工作?
您可能还想考虑在<img>
内构建每个<div class≈"thumb-caption>
,以便所有内容都正常排列。