0

我正在尝试设计一个页面，该页面有一个 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>
4

2 回答 2

0

关于图像的不同宽度问题，我只知道使用像 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修复了您不同的图像大小问题。

于 2013-03-14T07:10:39.827 回答
0

所以这只是一个黑客，但它完成了工作。如果有人能告诉我一个更好的方法来做到这一点，我更愿意，但我所做的是为每个文本描述分配一个新的 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>
于 2013-03-21T07:58:33.283 回答