html - 自动更改进度条宽度而无需离开其位置

Question

首先下面是改变窗口大小前进度条的正常形式

其次，下面是改变窗口大小后进度条的形式

当窗口分辨率随窗口大小变化时，如何让进度条始终稳定在同一个地方？

HTML:

<div id="controls_container">
    <a id="addFile">
        <span class='icon-uniF0FE'></span>
        <span>Add</span>
    </a>
    <a id="beginUpload">
        <span class='icon-upload'></span>
        <span>Upload</span>
    </a>
    <div id="progressAll_container">
        <div id="progressAll"></div>
    </div>
</div>

CSS

#controls_container {
}

#progressAll_container {
    width:81%;
    display:inline-block;
    border:1px solid #AED0EA;
    vertical-align:top;
}
#progressAll {
    width:0%;
    height:2em;
    text-align:center;
    color:#3395C6;
    background: linear-gradient(to bottom, #EEF6FB, #CDE5F4);
    line-height:32px;
}

Answer 1

你可以用 jquery 的方式来做。希望对您有所帮助。

   $(document).ready(function(){
        $(window).resize(function(){
               var bar_width = $("#controls_container").width()-($("#addFile").outerWidth()+$("#beginUpload").outerWidth());
               $("#progressAll_container").outerWidth(bar_width-(bar_width*0.05));
            });
    });
      

#controls_container {
}

#progressAll_container {
    width:81%;
    display:inline-block;
  height:81%;
    border:1px solid #AED0EA;
    vertical-align:top;
}
#progressAll {
    width:100%;
    height:2em;
    text-align:center;
    color:#3395C6;
    background: linear-gradient(to bottom, #EEF6FB 0%, #CDE5F4 100%);
    line-height:32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="controls_container">
          <a id="addFile">
            <span class='icon-uniF0FE'></span>
            <span>Add</span>
          </a>
          <a id="beginUpload">
            <span class='icon-upload'></span>
            <span>Upload</span>
          </a>
          <div id="progressAll_container">
            <div id="progressAll">100%</div>
          </div>
        </div>