吸收HTML元素的寬度

我試圖去想如何用html元素來做到這一點。吸收HTML元素的寬度

alt text

有沒有什麼特別的顏色是，所以我並不需要讓他們的圖像。請注意文字是對齊的。此外，顏色條從左邊的文字上移。

所以這可以通過使文本正確地浮現背景色爲白色，並將背景色設置在其旁邊（然後清除）來實現。或者，而不是浮動，我可以做文本對齊，並獲得類似的效果。

這是踢球者。

我正在使用JavaScript庫（應該不重要哪一個）來創建動畫。動畫是條收縮到左邊，並最終像這樣：

alt text

與浮子或文本對齊方法的問題是，太多的價值已被改變的兩種狀態之間進行轉換。 JavaScript動畫效果傾向於更改幾個預定義的值，如寬度或字體大小。爲了使用float或text-align方法將圖片1轉換爲圖片2，我必須刪除浮動/文本對齊，然後設置條形顏色的寬度，但如果我想保留javascript對於這樣一個簡單的任務，開銷最小

我試過絕對定位/寬度，但我不能得到任何東西使文本右對齊，並讓酒吧在左邊的相同點相遇。

我希望也許我只是盲目的一個簡單的解決方案，但正如我所看到的，我需要一個元素，以某種方式將文本定位到右側，並且一個元素佔用儘可能多的空間它的顏色...和具有顏色的元素應該能夠佔據一個寬度，同時在其旁邊有文字。

謝謝。

來源

2009-05-04 phillc

這是我的嘗試。 注意：以一些反表狂熱者的恐怖，這確實使用表。浮動不能像表格那樣「佔用所有可用空間」。

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

來源

2009-05-04 15:26:37 cletus

稍顯尷尬的文字看起來像它的中心...我想我會看看我是否可以採取一些你的想法，並將其合併到我的解決方案。 – phillc 2009-05-04 15:41:51

什麼文字看起來像是居中？ – cletus 2009-05-04 15:43:13

他在談論表格版本。 CSS版本效果更好。 – KyleFarris 2009-05-04 15:50:57

做彩色欄需要一個特定的寬度，或只需填寫右邊的單詞和左邊的單詞之間的空格？假設我的假設的正確：

<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

來源

2009-05-04 15:27:57

這是測試，它完美的作品（沒有愚蠢的表格和非常簡單的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>

編輯： 我假設你綁定這些導航元素，所以我添加了鼠標交互邏輯。無論如何，這可能是有用的，哈哈？

第二編輯： 我已經改變了代碼更高效，更可預測......如果有人關心。 ;）

來源

2009-05-04 15:43:00 KyleFarris

吸收HTML元素的寬度

回答

相關問題