0

我有一个标题，其中有两个相邻的图像（一个图标和一个字标）。第一个图像有一个绝对大小，但是第二个图像，一个较长的单词徽标，具有动态宽度。我想要做的是让这个字标根据屏幕大小（它是一个响应页面）动态调整大小，同时保持在图标旁边。如果我采用内联路线，它会在依靠 max-width 调整图像大小之前跳转到新行。

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

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

花车适用于这样的事情吗？也许是普通内联块 div 元素上的背景图像？

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

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

4

2 回答 2

1

我认为你正在接近左右属性，试试这个：http: //jsfiddle.net/N8GJa/

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

#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;
}
于 2013-07-25T21:16:39.697 回答
0

如果您的元素具有固定的高度（在您的情况下似乎确实如此），您可以使用绝对定位轻松完成此操作。

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; }

看到它在行动。

于 2013-07-25T21:19:06.720 回答