配售塊從頂部

-1

我想顯示使用HTML和CSS巴的絕對空間的左側和浮動的特點：配售塊從頂部

<style type="text/css"> 
     #container { 
     position: relative; 
     height:20px; 
     } 
     .bar { 
     position:absolute; 
     top:0px; 
     height:100%; 
     background-color:orange; 
     border:1px solid black; 
     } 
    </style> 

<div id="container"> 
    <div class="bar" style="left:0px; width:100px">&nbsp;</div> 
    <div class="bar" style="left:20px; width:30px">&nbsp;</div> 
    <div class="bar" style="left:110px; width:10px">&nbsp;</div> 
</div>

jsFiddle

重要的是，每一個酒吧都有正確的寬度和精確距離，如inline-CSS所述。這些條是動態生成的，我對它們的順序沒有影響，也不可能確定一個條與另一個條是否重疊。

正常的HTML輸出會在＃1和＃2之間產生重疊。但是，我希望酒吧之間沒有重疊，並且看到酒吧＃1下的酒吧＃2，但與左邊的距離正確。

我無法手動更改每個會重疊的小節的top設置，所以我正在尋找一個動態解決方案。 TIA

來源

2013-06-28 thoughtgap

放在一個的jsfiddle http://jsfiddle.net/EYvVM/ – Jaay

你有什麼試過嗎？問題到底在哪裏？只需更改協調員即可。 -1直到你修復 – TMS

我不確定問題是什麼。如果你將它們設置爲'position：absolute'，爲什麼會「更改頭寸」？也許你正在尋找['float：left']（https://developer.mozilla.org/en-US/docs/Web/CSS/float）而不是'position：absolute;'。 – Travesty3

如果你想讓酒吧自然流動，不重疊，也許絕對定位他們是不正確的道路。嘗試float: left，如果有空間，它們會將它們放在同一行;否則，它會移動到下面。

而當你說如果你改變標籤的順序，那麼2號柱根本不會顯示，那是因爲z順序。它顯示在更大的酒吧後面，所以它根本不可見。

來源

2013-06-28 12:21:29

如果你只想絕對位置，那麼你將不得不像這樣定位它們。

<div id="container"> 
    <div class="bar" style="left:0px; width:100px">&nbsp;</div> 
    <div class="bar" style="left:110px; width:30px">&nbsp;</div> 
    <div class="bar" style="left:140px; width:10px">&nbsp;</div> 
</div>

如果你可以使用其他方式，你可以用float:left;帶邊距。

希望這有助於

來源

2013-06-28 12:22:38 LegendaryAks

也許你正在尋找的position: absolute和float: left的組合。嘗試將其放入另一個具有設定寬度的容器中，並將其絕對放置在您希望條形的位置，然後將每個留在容器內的條形件浮起來。就像這樣：

jsFiddle（試着改變你的窗口的大小，看看會發生什麼）

HTML

<div id="container"> 
    <div id="abs"> 
     <div class="bar" style="background-color:green; width:30px">&nbsp;</div> 
     <div class="bar" style="background-color:blue; width:100px">&nbsp;</div> 
     <div class="bar" style="width:10px">&nbsp;</div> 
    </div> 
</div>

CSS

#container { 
    position: relative; 
    height:20px; 
} 
#abs { 
    border: 1px solid red; 
    position: absolute; 
    left: 20px; 
    width: 50%; 
} 
.bar { 
    height:100%; 
    background-color:orange; 
    border:1px solid black; 
    float:left; 
}

我不認爲你可以在不使用JavaScript的情況下做你想做的事。你已經指出JS解決方案不適合你，但也許這個解決方案對任何其他人在這篇文章中陷入困境都會有幫助。這可能會需要調整，但它應該給一個基本的想法，怎麼可以這樣做：

jQuery solution

var lastX = 0; 
$('.bar').each(function() { 
    if (parseInt($(this).css('left')) < lastX) { 
     $(this).css('top', parseInt($(this).css('top'))+25); 
    } else { 
     lastX = lastX + $(this).width(); 
    } 
});

來源

2013-06-28 12:52:24 Travesty3

容器不應該漂浮在左邊，因爲左邊的空間必須按照內聯css所述的方式修正.. – thoughtgap

我不認爲你想要做什麼可以用HTML和CSS完成。你可以用JavaScript來完成。 jQuery是一個選項嗎？ – Travesty3

不，不幸的是不是.. :( – thoughtgap

配售塊從頂部

回答

相關問題