Question

我试图用html元素思考如何做到这一点。

alt text

颜色没有什么特别之处，所以我不需要制作它们。请注意文本是右对齐的。此外，颜色条向上移动到左侧的文本。

所以这可以通过让文本浮动，背景颜色为白色，背景颜色设置在它旁边（然后是清晰的）来实现。

或者代替浮点数，我可以对齐文本并获得类似的效果。

这是踢球者。

我正在使用javascript库（不管是哪一个）来创建动画。动画是向左缩小的条形图，最终如此：

alt text

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

我已经尝试过绝对定位/宽度，但是我无法得到任何东西来使文本右对齐并让条形图在左边的同一点相遇。

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

谢谢。

Answer 1

这是我的尝试。 注意：对于一些反桌狂热者的恐怖，这确实使用了表格。浮动只是不能像桌子那样“占用所有可用空间”。

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

Answer 2

这是经过测试的，它完美运行（没有愚蠢的表和非常简单的CSS / jQuery）：

<style type="text/css">
   .crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; }
    .crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; }
    #red { background-color:red; }
    #blue { background-color:blue; }
    #green { background-color:green; }
    #yellow { background-color:yellow; }
    #pink { background-color:pink; }
    #grey { background-color:grey; }
</style>


<script type="text/javascript">
    $(function() {
        $('.crazy_slider').hover(
            function() {
                var bar_width = $(this).width();
                var $crazy_slider_text = $(this).children('.crazy_slider_text');
                if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) {
                    var original_width = $crazy_slider_text.width();
                    $crazy_slider_text.data('original_width',original_width);
                }
                $crazy_slider_text.stop().animate({width:95+'%'},500);
            },
            function() {
                var $crazy_slider_text = $(this).children('.crazy_slider_text');
                var text_width = $crazy_slider_text.data('original_width');
                $crazy_slider_text.stop().animate({width:text_width+"px"},500);
            }
        );
    });
</script>


<a href="#" class="crazy_slider" id="red"><div class="crazy_slider_text">FOO</div></a>
<a href="#" class="crazy_slider" id="blue"><div class="crazy_slider_text">BAR</div></a>
<a href="#" class="crazy_slider" id="green"><div class="crazy_slider_text">BAZ</div></a>
<a href="#" class="crazy_slider" id="yellow"><div class="crazy_slider_text">FOOBAR</div></a>
<a href="#" class="crazy_slider" id="pink"><div class="crazy_slider_text">FOOBARBAZ</div></a>
<a href="#" class="crazy_slider" id="grey"><div class="crazy_slider_text">BAZAGAIN</div></a>

修改我假设你正在努力用它们制作某种导航元素，所以我添加了鼠标交互逻辑。无论如何，它可能有用，哈哈？

第二次修改： 我已经将代码更改为更高效，更可预测......如果有人关心的话。 ;）

Answer 3

彩色条需要是特定的宽度，还是只填充右边的单词和左边的原点之间的空格？假设我的假设是正确的：

<style>

#container    {width: 50%;
          margin: 0 auto;
        }

span    {width: 100%;
        display: block;
        text-align: right;
        margin: 0.2em 0;
        }

span p  {text-align: right;
        background-color: #fff;
        color: #333;
        display: inline-block;
        padding: 0 0 0 0.4em;
        line-height: 1.4em;
        font-weight: bold;
        }

span#foo    {background-color: #f00;
        }
span#bar    {background-color: #0f0;
        }
span#foobar {background-color: #00f;
        }

 </style>



<div id="container">
    <span id="foo">
        <p>foo</p>
    </span>
    <span id="bar">
        <p>bar</p>
    </span>
    <span id="foobar">
        <p>foobar</p>
    </span>

</div>

工作演示： http://davidrhysthomas.co.uk/so/colouredfoobars.html

宽度吸收HTML元素

3 个答案: