Question

我有一个标题，其中两个图像彼此相邻（图标和文字标记）。第一个图像具有绝对大小，但第二个图像（较长的文字标识）具有动态宽度。我想要发生的是，这个字标是根据屏幕大小动态调整大小（它是一个响应页面），同时保留在图标旁边。如果我采用内联路线，它会跳到新线，然后依靠最大宽度来调整图像大小。

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

所以我正在寻找的是如何使用动态宽度的块（在这种情况下，max-width = 100％），但是绝对的起始位置。如果这有意义吗？

浮标是否可以用于此类操作？也许正常的内联块div元素背景图像？

感谢阅读。我可以附上代码，但我已经尝试了各种不同的东西，而且我现在并没有真正地坐在那里。

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

Answer 1

我认为你已经接近左右属性，试试这个：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;
}

Answer 2

如果你的元素有一个固定的高度（在你的情况下似乎是这样），你可以使用绝对定位来轻松完成。

HTML：

<div id="outer">
    <div id="fixed"></div>
    <div id="fluid"></div>
    Some more content to show that layout continues without issues from here on
</div>

CSS：

div { height: 50px }
#outer { position: relative }
#fixed { width: 20px; }
#fluid { position: absolute; top: 0; left: 20px; right: 0; }

<强> See it in action

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

2 个答案: