javascript - 吸收 HTML 元素的宽度-6ren

javascript - 吸收 HTML 元素的宽度

转载作者：搜寻专家更新时间：2023-10-31 23:15:05

我正在思考如何使用 html 元素来做到这一点。

alt text

颜色没有什么特别的，所以我不需要把它们做成图像。请注意，文本是右对齐的。此外，颜色条从左侧上升到文本。

所以这可以通过让文本 float 在右侧，背景颜色为白色，并在其旁边设置背景颜色的 div(然后是透明的)来实现。

或者代替 float ，我可以使文本右对齐并获得类似的效果。

这是踢球者。

我正在使用 javascript 库(无论哪个库)来创建动画。动画是条形向左收缩，最后像这样:

alt text

float 或文本对齐方法的问题在于必须更改太多值才能在两种状态之间转换。 javascript 动画效果往往想要更改几个预定义值，如宽度或字体大小。为了使用 float 或文本对齐方法从图片 1 转移到图片 2，我必须删除 float /文本对齐，然后设置条形颜色的宽度，但如果我想保留 javascript，那将不起作用对于这样一个简单的任务，开销很小。

我试过绝对定位/宽度，但我无法使文本右对齐并使条形在左侧的同一点相交。

我希望也许我只是对一个简单的解决方案视而不见，但正如我所见，我需要一个以某种方式将文本定位在右侧的元素，以及一个在它旁边占据尽可能多空间的元素对于颜色......并且具有颜色的元素应该能够采用宽度，同时在其旁边放置文本。

谢谢。

最佳答案

这是我的尝试。 注意: 令一些反表格狂热者感到恐惧的是，这确实使用了表格。 float 不能像表格那样“占用所有可用空间”。

<html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("th").animate({ width: 0 }, 2000);
  });
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>

我想到了一种非常有效的非表格方式，所以这里是:

<html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>