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可修复您不同的图像尺寸问题。

Answer 2

所以这真的只是一个黑客，但它完成了工作。我更愿意，如果有人能告诉我一个更好的方法来做到这一点，但我所做的是为每个文本描述分配一个新的div名称并使用position：relative;然后根据每张照片需要的位置移动它。这需要永远，但它确实有效。

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

JQuery画廊和CSS

2 个答案: