在 CSS 中，当其他元素宽度未知时，如何自动填充容器？

发布于 2024-12-11 13:09:06 字数 481 浏览 0 评论 0原文

我在包含元素内有两个元素。容器宽度为 960 像素，每侧填充 10 像素。我有两个彼此相邻的浮动元素。第一个元素将包含未知数量的文本，另一个元素将需要调整以填充容器宽度的其余部分。

例如：

<div id="container">
     <div id="item1">Unknown size</div><div id="item2">fill in width of left over</div>
</div>

编辑---->

更多信息：

我的第一个元素将包含未知数量的文本。第二个元素将不包含任何内容，而是包含背景，并且更像是文本的重音。可以这样想：

启动你的引擎！（后面是轮胎痕迹图案）转弯时小心！（后面是轮胎标记的图案）

这两个项目的文本长度不同，因此轮胎标记也会不同。但我需要所有的都在同一条线上。

原文

I have two elements inside a containing element. The container is 960px widt with 10px of padding on each side. I have two floated elements that are next to one another. The first element will contain text of an unknown amount and the other element will need to adjust to fill the rest of the containers width.

For example:

<div id="container">
     <div id="item1">Unknown size</div><div id="item2">fill in width of left over</div>
</div>

edit---->

more information:

my first element will contain an unknown amount of text. The second element will contain none but will rather contain a background and be treated more like an accent to the text. Think of it like this:

START YOUR ENGINES! (followed by a pattern of tire marks)
CAUTION ON THE TURN! (followed by a pattern of tire marks)

These two items have different lengths for text so the tire marks would be different too. but I need the all to be on the same line.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心碎无痕… 2024-12-18 13:09:06

您可以浮动 #item1 而不是浮动 #item2，如下所示：

http://jsfiddle.net/CevQH/1/

由于浮动，#item1 将位于 #item2 之上，它会从常规文档流中删除。正如您在 jsfiddle 中看到的，item2 中的文本紧邻 item1，而背景占据了整个宽度。

如果将项目放置在其下方，则应在 #item2 之后的第一个项目中添加 clear:left

回复收藏 0 原文

喜爱纠缠 2024-12-18 13:09:06

如果您可以确定一列始终具有较高的高度，则可以将该列保持不浮动并绝对定位第二列。第二列将通过顶部和底部固定容器（需要 position:relative）。

.container {
  position: relative;
  padding: 0 10px;
}

.left {
  width: 200px;
}
.right {
  position: absolute;
  width: 100px;
  right: 10px;
  top: 0px;
  bottom: 0px;
}

在这里摆弄：http://jsfiddle.net/neilheinrich/5mRDM/

If you can be sure that one column will always have the greater height you can leave that column unfloated and absolutely position the second column. The second column would hold to the container (which would need position: relative) by the top and bottom.

.container {
  position: relative;
  padding: 0 10px;
}

.left {
  width: 200px;
}
.right {
  position: absolute;
  width: 100px;
  right: 10px;
  top: 0px;
  bottom: 0px;
}

Fiddled here: http://jsfiddle.net/neilheinrich/5mRDM/

回复收藏 0 原文