Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

Добавить рамку, сохранив ширину

Есть две колонки 30%/70%:

<style>
  .left {
    float:left; 
    width:30%; 
    background: #aef;
  }

  .right {
    float:right; 
    width:70%;
    background: tan;
  }
</style>

<div class="left">
 Левая<br>Колонка
</div>
<div class="right">
 Правая<br>Колонка<br>...
</div>

Можно ли добавить к правой border-left: 2px solid black, не трогая свойство width ни слева ни справа?

Поддержка всех современных браузеров, IE начиная с версии 8.

Подсказка
Решение
Подсказка

Используйте свойство box-sizing.

Решение
Решение

Да, можно — просто добавляем border-left и указываем box-sizing: border-box:

<style>
  .left {
    float:left; 
    width:30%; 
    background: #aef;
  }

  .right {
    float:right; 
    width:70%;
    background: tan;
*!*
    border-left: 2px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
*/!*
  }
</style>

<div class="left">
 Левая<br>Колонка
</div>
<div class="right">
 Правая<br>Колонка<br>...
</div>

#501
Наверх

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!