吸收HTML元素的宽度 [英] Width absorbing HTML elements

问题描述

我试图去想如何用html元素来做这件事。 alt =alt text>

颜色没有特别之处，所以我不需要制作图片。
请注意文字是对齐的。此外，颜色条从左边的文字上移。

所以这可以通过使文本正确地浮现为背景色为白色，背景颜色设置在它旁边（然后是清除）。

或者，也可以不使用浮动框，而是使用文本对齐方式并获得类似的效果。 >

这里是kicker。

我使用一个javascript库（应该不是哪一个）来创建一个动画。动画是酒吧缩小到左边，并最终如此：

浮点数或文本对齐方法的问题是太多的值必须改变，以便在两种状态之间转换。 JavaScript动画效果倾向于更改几个预定义的值，如宽度或字体大小。为了使用float或text-align方法将图片1转换为图片2，我必须删除浮动/文本对齐，然后设置条形颜色的宽度，但如果我想保留javascript开销最小的这样一个简单的任务。

我已经尝试了绝对定位/宽度，但我不能得到任何东西来使文本右对齐，并让酒吧见面在我左边的同一点。

我希望也许我只是一个简单的解决方案的盲目，但正如我所看到的，我需要一个有文本以某种方式定位在右侧，并且一个元素在其旁边占据尽可能多的空间以用于颜色...并且具有该颜色的元素应该能够占据宽度，同时在其旁边具有文本。 / p>

谢谢。

解决方案

这是我的尝试。 注意：对于一些反表狂热分子的恐惧，这确实使用表格。

 < html> 
< head> 
< style type =text / css> 
 table {width：300px;背景：#DDD;空单元格：显示; } 
 th {padding-left：8px;宽度：100％;身高：1em; } 
 td {padding-left：12px;宽度：自动; } 
 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：grey; } 
< / style> 
< script type =text / javascriptsrc =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>< tr id =row2>< th>< / th>< td>< div> BAR< / div>< / td>< / tr> < /表> 
< table>< tr id => row3>< th>< th th>< td>< div>这些预设值是< / div>< / td>< TR>< /表> 
< table>< tr id =row4>< th>< th th>< td>< div> MAKING ME THIRSTY< / div>< / td> TR>< /表> 
< table>< tr id =row5>< th>< th th>< td>< div> BLAH< / div>< / td>< / tr> < /表> 
< table>< tr id =row6>< th>< th th>< td>< div> BLAH< / div>< / td>< / tr> < /表> 
< / body> 
< / html> 
  

我想到了一个非表的方式，它工作的非常好，所以这里是：

 < html> 
< head> 
< style type =text / css> 
 div div {height：1.3em; } 
 #wrapper {width：300px;溢出：隐藏; } 
 div.text {float：right;白色空间：nowrap;明确：两者;背景：白色; 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：grey; } 
< / style> 
< script type =text / javascriptsrc =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>这些PRETZELS是< / 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> 
  

Im trying to think how to do this with html elements.

There is nothing special about the colors, so I don't need to make them images. Do note that the text is right aligned. Also, the color bar goes up to the text from the left.

So this could be implemented by having the text float right with background color white, and a div with the background color set right next to it (and then a clear).

Or instead of floats, I can do text align-right and get a similar effect.

Here is the kicker.

I'm using a javascript library (shouldn't matter which one) to create an animation. The animation is the bars shrink to the left, and end up like so:

The problem with the float or text-align methods are that too many values have to be changed to transition between the two states. The javascript animation effects tend to want to change a couple predefined values, like width or font-size. In order to transfer from picture 1 to picture 2 using the float or text-align methods, I must remove the floating/text-align then set the width of the bar color, but that doesn't work if I want to keep the javascript overhead minimal for such a simple task.

I've tried absolute positioning/widths, but I can't get anything to make the text right aligned AND have the bars meet at the same point on the left.

I'm hoping maybe I'm just blind of a simple solution, but as I see it, I need one element that has the text positioned to the right somehow, and an element that takes up as much room possible beside it for the color... AND the element that has the color should be able to take a width, while having the text follow beside it.

Thank you.

解决方案

Here's my attempt. Note: to the horror of some anti-table zealots this does use tables. Floats just can't do "take up all available space" like tables can.

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

I thought of a non-tables way of doing it that works pretty well, so here it is:

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

这篇关于吸收HTML元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！