Question

我想通过img class＆＃34; imageHolader＆＃34;为img添加标题。＆安培; ＆＃34;字幕＆＃34;并保持文本与img对齐（向右侧）。问题是，这个标题（类）推动了img下的文本。我尝试以不同的方式解决这个问题，但不成功，对我来说这似乎是位置属性的问题。谢谢你的建议。

<section>
<div class="container-fluid bg_color cont-padding">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <a name="myanchor"></a>
             <div class="imageHolder">
             <img src="img/a1.jpg" class="img-responsive" id="imgsectionleft" alt="moscow subway typical train">
             <div class="caption"><br>Metro w Moskwie
             </div>
             </div>
             <h3><i class="fa fa-star fa-1x"></i> How did it all start</h3>
                <p class="section-text text-justify">London has the world’s oldest underground rail system; Tokyo’s metro has employees to push people into packed trains; New York’s subway is an ethnic melting pot. Hidden beneath the streets of Moscow is something completely different. To step onto the Moscow metro is to step back in time and immerse yourself in a museum rich in architecture and history.</p>

CSS:

.imageHolder { 
    position: relative; 
    width: 240px; 
    height: 320px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: left; 
} 
.imageHolder .caption { 
    position: absolute; 
    width: 240px; 
    height: 70px; 
    bottom: -9px; 
    left: 0px; 
    color: #ffffff; 
    background: 
    #000000; 
    text-align:center; 
    font-weight:bold; 
    opacity:0.5; 
}
#imgsectionleft {
    float:left;
    width:240px;
    height:320px;
    margin-right:2%; 
    margin-top: 2%;
    margin-bottom: 2px;
    border: 11px solid #0D1447;
> Blockquote

img上的标题将img下的文字推下来

0 个答案: