html - 具有绝对起始位置的动态宽度

Question

我有一个标题，其中两个图像彼此相邻(一个图标和一个文字标记)。第一张图片有一个绝对大小，但是第二张图片，一个较长的文字标志，有一个动态宽度。我想要发生的事情是让这个文字标记根据屏幕尺寸(它是一个响应页面)动态调整大小，同时保持在图标旁边。如果我采用内联路由，它会在依赖最大宽度调整图像大小之前跳到新行。

我试过绝对定位，但 100% 宽度始终是整个屏幕宽度。如果我指定 left: 20px，它首先抓取全屏宽度，然后将元素移动超过 20px。现在元素右边的 20px 被剪掉了。我也尝试添加 right: 20px，结果是一样的。

所以我正在寻找的是如何拥有一个具有动态宽度(在本例中，max-width=100%)但绝对起始位置的 block 。这是否有意义？

花车对这样的东西有用吗？也许普通内联 block div 元素上的背景图像？

感谢阅读。我可以附上代码，但我已经尝试了各种不同的东西，但我现在并没有真正坚持下去。

编辑:我觉得 fiddle 不能帮助我描述我的问题，我制作了这张图片:http://i2.minus.com/ifZnLFtk4cfyf.png

Answer 1

我认为您已经接近 right 和 left 属性，试试这个:http://jsfiddle.net/N8GJa/

您可以将图像放置在每个 div 中，宽度为 100%。

#static {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em; // fixed image width
}
#dynamic {
    position: absolute;
    top: 0;
    left: 3em; // same as width above
    right: 0;
}