进度条溢出div

时间：2017-12-04 09:49:46

标签： jquery html html5 css3

我正在进行进度条我在条形图中添加了div，但是0%和100%值已经溢出，而且在到达该点之后移动也看起来有点怀疑然后显示全宽。 / p>

预期产量： enter image description here 

$(document).ready(function(){
    function progressbar() {
        $('.iva_progress_bar').each(function() {

            var totalreviews = 1540;

            var percent = $(this).find('.bar_color').attr('data-width');

            $(this).find('.percentage').append(percent + '%');
            $(this).find('.bar_color').animate({
                  width: percent + '%'
             }, 1500);

            var a = $(this).find('.bar_color').attr('data-width'); 
            var ur = ( a/ 100 ) * totalreviews;

            var usersReview = Math.floor(ur);
            $(this).find('.users').append(usersReview); 
        });   
    }

    progressbar();
});

/* progress bar */
.testimonial_block2 .iva_progress_bar {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
    flex-direction: row;
}
.testimonial_block2 .iva_progress_bar .bar_title {
    flex-basis: 15%;
    align-self: center;
    text-align: center;
    font-size: 18px;
}
.testimonial_block2 .iva_progress_bar .bar_wrap {
    flex-basis: 70%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
    background-color: #ebebeb;
}
.testimonial_block2 .iva_progress_bar .bar_color {
    position: relative;
    padding: 18px 0;
    float: left;
    background-color: #3379b7;
}
.testimonial_block2 .percentage {
    display: flex;
    position: absolute;
    padding: 5px;
    top: 6px;
    right: 0;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}

.testimonial_block2 .users {
    flex-basis: 15%;
    align-self: center;
    font-size: 18px;
    color: #777777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="testimonial_block2">

    <!-- progress bar -->

    <div class="iva_progress_bar">
        <div class="bar_title">5 REVIEWS</div>
        <div class="bar_wrap">
            <span class="bar_color" data-width="0">
                <div class="percentage"></div>
            </span>
        </div>
        <div class="users"></div>
    </div>

    <div class="iva_progress_bar">
        <div class="bar_title">4 REVIEWS</div>
        <div class="bar_wrap">
            <span class="bar_color" data-width="100">
                <div class="percentage"></div>
            </span>
        </div>
        <div class="users"></div>
    </div>

    <div class="iva_progress_bar">
        <div class="bar_title">3 REVIEWS</div>
        <div class="bar_wrap">
            <span class="bar_color" data-width="3">
                <div class="percentage"></div>
            </span>
        </div>
        <div class="users"></div>
    </div>

    <div class="iva_progress_bar">
        <div class="bar_title">2 REVIEWS</div>
        <div class="bar_wrap">
            <span class="bar_color" data-width="6">
                <div class="percentage"></div>
            </span>
        </div>
        <div class="users"></div>
    </div>

    <div class="iva_progress_bar">
        <div class="bar_title">1 REVIEWS</div>
        <div class="bar_wrap">
            <span class="bar_color" data-width="11">
                <div class="percentage"></div>
            </span>
        </div>
        <div class="users"></div>
    </div>
</div>

2 个答案:

答案 0 :(得分：0)

添加overflow: visible !important;将解决此问题

＆＃13;
＆＃13; 
$(document).ready(function(){
    function progressbar() {
        $('.iva_progress_bar').each(function() {

            var totalreviews = 1540;

            var percent = $(this).find('.bar_color').attr('data-width');

            $(this).find('.percentage').append(percent + '%');
            $(this).find('.bar_color').animate({
                  width: percent + '%'
             }, 1500);

            var a = $(this).find('.bar_color').attr('data-width'); 
            var ur = ( a/ 100 ) * totalreviews;
           
            var usersReview = Math.floor(ur);
            $(this).find('.users').append(usersReview); 
        });   
    }
   
    progressbar();
});
＆＃13; 
/* progress bar */
.testimonial_block2 .iva_progress_bar {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
    flex-direction: row;
}
.testimonial_block2 .iva_progress_bar .bar_title {
    flex-basis: 15%;
    align-self: center;
    text-align: center;
    font-size: 18px;
}
.testimonial_block2 .iva_progress_bar .bar_wrap {
    flex-basis: 70%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
    background-color: #ebebeb;
}
.testimonial_block2 .iva_progress_bar .bar_color {
	position: relative;
    padding: 18px 0;
    float: left;
    background-color: #3379b7;
    overflow: visible !important;
}
.testimonial_block2 .percentage {
	display: flex;
	position: absolute;
    padding: 5px;
    top: 6px;
    right: -20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}

.testimonial_block2 .users {
    flex-basis: 15%;
    align-self: center;
    font-size: 18px;
    color: #777777;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="testimonial_block2">

					<!-- progress bar -->

					<div class="iva_progress_bar">
						<div class="bar_title">5 REVIEWS</div>
						<div class="bar_wrap">
							<span class="bar_color" data-width="0">
								<div class="percentage"></div>
							</span>
						</div>
						<div class="users"></div>
					</div>

					<div class="iva_progress_bar">
						<div class="bar_title">4 REVIEWS</div>
						<div class="bar_wrap">
							<span class="bar_color" data-width="100">
								<div class="percentage"></div>
							</span>
						</div>
						<div class="users"></div>
					</div>

					<div class="iva_progress_bar">
						<div class="bar_title">3 REVIEWS</div>
						<div class="bar_wrap">
							<span  class="bar_color" data-width="3">
								<div class="percentage"></div>
							</span>
						</div>
						<div class="users"></div>
					</div>

					<div class="iva_progress_bar">
						<div class="bar_title">2 REVIEWS</div>
						<div class="bar_wrap">
							<span class="bar_color" data-width="6">
								<div class="percentage"></div>
							</span>
						</div>
						<div class="users"></div>
					</div>

					<div class="iva_progress_bar">
						<div class="bar_title">1 REVIEWS</div>
						<div class="bar_wrap">
							<span class="bar_color" data-width="11">
								<div class="percentage"></div>
							</span>
						</div>
						<div class="users"></div>
					</div>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以创建一个计算元素百分比宽度的函数，并使用此百分比向左计算。

我创造了这个。你可以修改一下：

public static List<String> isGod = new ArrayList<>();             // <== HERE
public static List<String> playerList = new ArrayList<String>();

@Override
public boolean onCommand(CommandSender sender, Command cmd, String str, String[] args) {
    Player player = (Player) sender;
    String p = player.getName();

    if (cmd.getName().equalsIgnoreCase("god") && sender instanceof Player) {
        if (!isGod.contains(p)) {
            isGod.add(p);
            playerList.add(p);
            player.sendMessage(ChatColor.GREEN + "Godmode is enabled");
            return true;
        } else {
            isGod.remove(p);
            playerList.remove(p);
            player.sendMessage(ChatColor.GREEN + "Godmode is disabled");
            return true;
        }
    }
    return true;
}

完整代码 

if(percent >= 88){
  perce = 100 - percent
  $(this).find(".percentage").css({left:(88-perce) + "%"})
}else{
  $(this).find(".percentage").css({left:(percent) + "%"})
}

$(document).ready(function(){
    function progressbar() {
        $('.iva_progress_bar').each(function() {

            var totalreviews = 1540;

            var percent = $(this).find('.bar_color').attr('data-width');
        
            
            if(percent >= 88){
              perce = 100 - percent
              $(this).find(".percentage").css({left:(88-perce) + "%"})
            }else{
              $(this).find(".percentage").css({left:(percent) + "%"})
            }
            
            $(this).find('.percentage').append(percent + '%');
            $(this).find('.bar_color').animate({
                  width: percent + '%'
             }, 1500);

            var a = $(this).find('.bar_color').attr('data-width'); 
            var ur = ( a/ 100 ) * totalreviews;
           
            var usersReview = Math.floor(ur);
            $(this).find('.users').append(usersReview); 
            
        });   
    }
   
    progressbar();
});
/* progress bar */
.testimonial_block2 .iva_progress_bar {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
    flex-direction: row;
}
.testimonial_block2 .iva_progress_bar .bar_title {
    flex-basis: 15%;
    align-self: center;
    text-align: center;
    font-size: 18px;
}
.testimonial_block2 .iva_progress_bar .bar_wrap {
    flex-basis: 70%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
    background-color: #ebebeb;
}
.testimonial_block2 .iva_progress_bar .bar_color {
	position: relative;
    padding: 18px 0;
    float: left;
    background-color: #3379b7;
    overflow: visible !important;
}
.testimonial_block2 .percentage {
	display: flex;
	position: absolute;
    padding: 5px;
    top: 6px;

    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
}

.testimonial_block2 .users {
    flex-basis: 15%;
    align-self: center;
    font-size: 18px;
    color: #777777;
}

相关问题
最新问题