Question

我在单个div中使用jQuery UI有两个进度条（通过细分div）。我还管理它们使用jQuery UI进度条代码的修改版本（从this forum thread绘制）垂直绘制。但是他们并没有像预期的那样彼此相邻。

以下是我正在设置它们的代码：

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
    first= $("<div>").addClass("first").appendTo(target);
    second= $("<div>").addClass("second").appendTo(target);         
}
first.progressbar({value: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}

有人可以告诉我，我如何设计它们以使它们彼此相邻？

Answer 1

如果它们包含在div中，那么您可以尝试float:left，甚至可能display:inline。如果您将它们浮动并且会弄乱您的页面布局，请尝试使用overflow:auto

将它们包装在div中

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
    first= $("<div style='float:left'>").addClass("first").appendTo(target);
    second= $("<div style='float:left'>").addClass("second").appendTo(target);         
}
first.progressbar({value: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}

Answer 2

实际上，ans就在那里......很简单。我所要做的就是设置两个objs（第一，第二）的css

例如在任何地方放置第二个进度条

second.progressbar({value: average,orientation: 'vertical'});
second.css({"position":"absolute","left":"30px"});

依此类推......其他css值

如何将两个垂直jQuery UI进度条彼此相邻？

2 个答案: