2


    我开始涉足响应式设计，因此我试图在我的 CSS 中找出最佳实践。我正在努力将标题文本放置在最终将成为自定义的、jquery 驱动的图像滑块上。

    所有这些都在http://www.taylorp0994.net/websites/cincoschool/index.html运行，因此请查看实时结果和代码以获取更多信息。

    我已经实现了看似可行的解决方案；但是，我担心无论上下文如何，使用像素都不是语义。我如何使用百分比来获得相同的外观以及我应该采取什么方法（margin-top、position:relative/top 等）？除了我当前的解决方案是定位：相对于标题框并通过顶部移动它：-46.5px 之外，我还没有在任何明显的方面取得很大成功。

4

1 回答 1

1

您发布的工作看起来非常有前途！

从我粗略的看，有两件事值得一提：

  • 使用像素测量没有什么特别“错误”的。唯一可能对您造成问题的是字幕的长度。如果文本可能会改变长度（因此：滚动到两行），那么使用设置的高度调整将不起作用。
  • 标题中有很多空的“p”标签，这是故意的吗？

我倾向于处理这类任务的方式是使用定位：

  • 有一个包含图像和标题的 div 包装。定位这个相对；
  • 将图像 z-index 设置为较低的数字；
  • 将标题的 z-index 设置得更高，并设置为 position: absolute, bottom: 0。这将使标题远离父 div 的底部边缘，而父 div 又会从图像继承它的高度。

两秒钟，我会发布一个例子。

你去： http: //jsfiddle.net/HhuhR/ 这是非常快速和肮脏的，但应该帮助你走上正确的轨道：

<style>
    .img-wrap{
        width: 60%; /*just here for the preview */
        position: relative;
    }
        .img-wrap img{
            max-width: 100%;
            z-index: 1
        }
        .img-wrap .caption{
            display: block;
            width: 100%;
            position: absolute;
            bottom: 5px; /*if using padding in the caption, match here */
            left: 0;
            z-index: 2;
            margin: 0;
            padding: 5px 0;
            text-indent: 5px;
            color: #fff;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.4);
        }
</style>

<div class="img-wrap">
    <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= "">
    <span class="caption">Lorem ipsum dolor sit amet</span>
</div>

请记住，随着您的视口宽度变窄，标题文本将主导图像（因为图像本身变小）。我倾向于在我的设计中确定一个问题，然后简单地覆盖底部/左侧的标题位置并设置位置：相对 - 这会将标题直接放在图像下方而不是重叠（并可能完全覆盖）它.

于 2013-05-20T10:29:59.477 回答