0

.clearfix {display: block;}
.clearfix:before,
.clearfix:after {display: table; line-height: 0; content: '';}
.clearfix:after {clear: both;}

.fl_l {float: left;}
.fl_r {float: right;}

#tasks_list {background: #cccccc; padding: 15px}
#tasks_list .count {width: 100px}
#tasks_list .price {width: 100px}
#tasks_list .control {width: 150px;}
<div id="tasks_list">
  <div class="clearfix">
    <div class="fl_l count">
      123
    </div>
    <div class="fl_l price">
      +5
    </div>
    <div class="fl_r control">
      testtesttest
      <br />
      test
    </div>
  </div>
</div>

https://jsfiddle.net/3q6opaqv/

Когда задаю width последней колонке, то появляется свободное место в конце:

Если же убрать width у последней колонки, то всё нормально:

Каким образом сделать, чтобы при задании width последней колонке, места не оставалось?

text-align: right отчасти помог, но он некрасиво по правой части выравнивает текст:

Желательно не предлагать изменять width у первой и второй колонок, чтобы как-то подвинуть последнюю колонку.

6
  • А если задать max-width: 150px; 12 янв 2016 в 12:17
  • 3
    может так? - jsfiddle.net/soledar10/75vLo0kx
    – soledar10
    12 янв 2016 в 12:18
  • @soledar10, просто гениально. Превратите свой комментарий в ответ, так как Вы ответили первым.
    – ModaL
    12 янв 2016 в 12:28
  • @soledar10 не видел ваш комментарий, пока писал ответ с небольшими пояснениями. Хотя тут не особо много вариантов... Добавьте ответ и я удалю свой
    – VenZell
    12 янв 2016 в 12:28
  • @VenZell - главное, что это помогло решить данную проблему. А ответ пусть будет Ваш
    – soledar10
    12 янв 2016 в 12:40

1 ответ 1

2

Вам понадобится обернуть содержимое блока fl_r control в блок-обертку.

Как будет выглядеть код:

<div class="fl_r control">
  <div class="control_content">      
    testtesttest
    <br />
    test
  </div>
</div>

Далее, на блок control нужно повесить выравнивание текста по правому краю:

.control {
  text-align: right
}

Далее, чтобы блок control_content сместился к правому краю, необходимо сделать его inline-block элементом. Главное не забыть вернуть выравнивание текста по левому краю:

.control_content {
  display: inline-block;
  text-align: left;
}  

.clearfix {display: block;}
.clearfix:before,
.clearfix:after {display: table; line-height: 0; content: '';}
.clearfix:after {clear: both;}

.fl_l {float: left;}
.fl_r {float: right;}

#tasks_list {background: #cccccc; padding: 15px; margin-top: 60px/*Для демонстрации*/}
#tasks_list .count {width: 100px}
#tasks_list .price {width: 100px}
#tasks_list .control {width: 150px; text-align: right}
#tasks_list .control_content {display: inline-block; text-align: left}
<div id="tasks_list">
  <div class="clearfix">
    <div class="fl_l count">
      123
    </div>
    <div class="fl_l price">
      +5
    </div>
    <div class="fl_r control">
      <div class="control_content">
        testtesttest
        <br />
        test
      </div>
    </div>
  </div>
</div>

Посмотреть результат

1
  • проголосовал за Ваш ответ. Но чтобы было справедливо, выберу ответ пользователя soledar10, так как он ответил первее. Спасибо большое Вам обоим :)
    – ModaL
    12 янв 2016 в 12:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.