JQuery 画廊和 CSS

Question

我正在尝试设计一个页面，其中包含一个 JQuery 画廊，每张图片都带有描述性文本。目标是使图像居中，描述性文本向左 5 像素。我遇到的问题是每张图片的宽度不同。我似乎无法将描述性文字贴在图片旁边。我需要使用什么 CSS 来使每个“文本”div 在每张幻灯片中位于 img 左侧 5 px？感谢您的帮助。

编辑:每张图片的宽度都应该不同。挑战在于让文本相应地水平改变位置

这是 JQuery:

<script type="text/javascript">
$('#gallery').cycle({ 
    fx:     'none', 
    speed:  'fast', 
    timeout: 15000, 
    next:   '#navrightarrow', 
    prev:   '#navleftarrow' 
});
</script>

<script type="text/javascript">
$('#gallery').before('<div id="imgnav">').cycle({ 
                fx: 'none', 
                speed:  'slow', 
                timeout: 15000, 
                pager:  '#imgnav', 
                pagerAnchorBuilder: function(idx, slide) { 
                        var src = $('img',slide).attr('src');
                        src = src.substring(0, src.length - 8);
                        return '<a href="#"><img src="' + src + 'detail.jpg" width="30" height="30" /></a>'; 
                } 
        }); 

</script>

这是 HTML:

<div id="gallery_wrapper">
            <div id="gallery">
                <div class="slide">
                    <div id="text">
                        <h5>Lambent</h5>
                        <p>2002</p>
                        <p>Oil on Linen</p>
                        <p>60 x 46 inches</p>
                    </div>
                    <a href="images/1 Lambent-detail.jpg" target="_blank"><img src="images/1 Lambent-full.jpg" alt="slide1"></a>
                </div>

                <div class="slide">
                    <div id="text">
                        <h5>Marsh Ikat</h5>
                        <p>2002</p>
                        <p>Oil on Linen<p>
                        <p>64 x 36 inches</p>
                    </div>
                    <a href="images/2 Marsh-Ikat-detail.jpg" target="_blank"><img src="images/2 Marsh-Ikat-full.jpg" alt="slide2"></a>
                </div>

Answer 1

关于图像的变宽问题，我唯一知道的是使用div之类的包装器。

<style>
  div.slide div.image_wrapper {
      width:  200px;    // define a fixed width
      height: 200px;    // define a fixed height here
      overflow: hidden; // this helps us have images behave of same size, without scaling 
    }
</style>


<div class="slide">
    <div class="text">     // You are repeating an ID text, have it as a class
        <h5>Marsh Ikat</h5>
        <p>2002</p>
        <p>Oil on Linen<p>
        <p>64 x 36 inches</p>
    </div>
    <div class="image_wrapper">
        <a href="images/2 Marsh-Ikat-detail.jpg" target="_blank">
            <img src="images/2 Marsh-Ikat-full.jpg" alt="slide2">
        </a>    
    </div>
</div>

image_wrapper 解决了您的图像尺寸变化问题。