Установка переменной процентной ширины элементов HTML рядом с другими элементами переменной ширины

Question

У меня есть структура HTML с заданным CSS.
И caption, и progress элементы должны отображаться в одной строке. caption элементы не должны иметь фиксированную ширину, а элементы progress должны заполнить остальную часть пространства рядом с caption на основе их ширины встроенного набора, что означает, что каждый элемент progress будет иметь разную общую ширину пикселя, но должен заполнить только заданные процент доступного пространства.
Структура HTML и правила CSS могут быть изменены любым способом.

Можно ли решить эту проблему только с помощью CSS?

.table { 
 
    padding: 15px; 
 
    width: 280px; 
 
    border: 1px solid black; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
.caption { 
 
    float: left; 
 
} 
 

 
.progress { 
 
    height: 14px; 
 
    border: 1px solid white; 
 
    border-radius: 4px; 
 
    background-color: green; 
 
    overflow: hidden; 
 
} 
 

 
.value { 
 
    margin-left: 5px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="caption">Short text: </div> 
 
     <div class="progress" style="width:11.65%"> 
 
      <span class="value">11.65</span> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class="caption">A bit longer text: </div> 
 
     <div class="progress" style="width:100%"> 
 
      <span class="value">100.00</span> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class="caption">X: </div> 
 
     <div class="progress" style="width:45.50%"> 
 
      <span class="value">45.50</span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Рассматривали ли вы с помощью Flexbox?

Просто добавьте это правило:

.row { 
    display: flex; 
} 

Если ваш обеспокоены поддержкой браузера альтернативой будет использовать дисплей: стол. Вы должны изменить разметку и CSS, как это:

.table { 
 
     border: 1px solid black; 
 
     font-family: sans-serif; 
 
     font-size: 12px; 
 
     padding: 15px; 
 
     width: 280px; 
 
    } 
 
    .inner-table { 
 
     display: table; 
 
    } 
 
    .row { 
 
     display: table-row; 
 
    } 
 
    .caption { 
 
     display: table-cell; 
 
     white-space: nowrap; 
 
     width: 1%; 
 
    } 
 
    .progress { 
 
     background-color: green; 
 
     border: 1px solid white; 
 
     border-radius: 4px; 
 
     display: table-cell; 
 
     height: 14px; 
 
    } 
 
    .value { 
 
     margin-left: 5px; 
 
     display:block; 
 
     width:0; 
 
     overflow: visible; 
 
    }

<div class="table"> 
 
     <div class="inner-table"> 
 
      <div class="row"> 
 
       <div class="caption">Short text: </div> 
 
       <div style="width:1.65%" class="progress"> 
 
        <span class="value">1.65</span> 
 
       </div> 
 
       <div class="remainder"></div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="inner-table"> 
 
      <div class="row"> 
 
       <div class="caption">A bit longer text: </div> 
 
       <div style="width:100%" class="progress"> 
 
        <span class="value">100.00</span> 
 
       </div> 
 
        <div class="remainder"></div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="inner-table"> 
 
      <div class="row"> 
 
       <div class="caption">X: </div> 
 
       <div class="progress" style="width:45.50%"> 
 
        <span class="value">45.50</span> 
 
       </div> 
 
       <div class="remainder"></div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

Пожалуйста, попробуйте это - обивка-право: 5px; Дисплей: встроенный; добавьте эти свойства в класс прогресса и также удалите пройденную ширину.

Answer 3

Ну, для дальнейшего использования, я играл немного с Flexbox штучка и придумал это:

.table { 
 
    padding: 15px; 
 
    width: 280px; 
 
    border: 1px solid black; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.caption { 
 
    margin: 1px 5px 1px 0; 
 
} 
 

 
.progress { 
 
    flex-grow: 1; 
 
    \t margin: auto; 
 
} 
 

 
.progress-content { 
 
    height: 14px; 
 
    border-radius: 4px; 
 
    background-color: green; 
 
} 
 

 
.value { 
 
    margin-left: 5px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="caption">Short text:</div> 
 
     <div class="progress"> 
 
      <div class="progress-content" style="width:11.65%"> 
 
       <span class="value">11.65</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class="caption">A bit longer text:</div> 
 
     <div class="progress"> 
 
      <div class="progress-content" style="width:100%"> 
 
       <span class="value">100.00</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class="caption">X:</div> 
 
     <div class="progress"> 
 
      <div class="progress-content" style="width:45.50%"> 
 
       <span class="value">45.50</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Если я получаю решение без Flexbox, будет принимать это как ответ :)