php - 如何正确放置我的字幕？

Question

我有一个图片库，目前只显示图片。我希望画廊看起来像这样(我的简单测试画廊): http://jsfiddle.net/karin_A/Nmxx4/1/ 即图片下方中心的标题。

到目前为止，我能做到的最好的是将标题放在图片下方但在图片右侧的图库:

html 图像容器:

 <div data-role="content" id="pagecontent" class="gallerycontent">
    <?= $output ?>
        </div> 

php图像输出:

 $html .= '<a href="#imgshow" data-transition="pop" data-index="'.$i.'" data-rel="dialog" id="thumb">
        <img src="https://[url]/'.rawurlencode($this->_decode_path($xml->COM->MOVIE[$i]->attributes()->dbIcoFilename)).'" alt="'.$xml->COM->MOVIE[$i]->attributes()->nameS.'" class="imgAlt">
        </a>';

jQuery 添加环绕边框和标题:

$.each($("img"), function() {
        $(this).wrap('<div class="wrapper"/>');
    });
    $.each($("img.imgAlt"), function() {
        $(this).after($(this).attr("alt"));
    });

CSS:

#pagecontent {
text-align:center;
font-size:12px;
color:#000;
text-decoration:none;
}

.wrapper{
    float:left;
    padding:0.2em;
    border: 1px solid #C0C0C0;
    margin:10px;
}

.thumb{
    padding: 0.1em;
    margin-right: 10px;
    margin-bottom: 15px;
}

.gallerycontent a img { 
    margin: 0.2em;
}

.caption{
    float:left;
    width:100%;
}

当我限制宽度 (width:100px;) 如果环绕边框我得到这个结果: 如您所见，如果图像名称真的很短，它就可以工作，但有时却不是。

另一个尝试:

$.each($("img.imgAlt"), function() {
        var title = this.alt;
        $(this).after('<div class="caption">'+ title +'</div>');
    });

将标题置于图片下方的中心位置，同时使 div 填充整个页面宽度，而不仅仅是标题的宽度。

Answer 1

尝试将 clear:both 添加到您的 .caption CSS 类