CSS: ширина в процентах и границы

Я определил ширину контейнеров в процентах. Я хотел бы добавить границу (3px с правой стороны ширины), так как ширина контейнера находится в%, а ширина границы - в px, как я могу настроить ширину контейнера?

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

Я хотел бы добавить границу 3px с правой стороны .left. Например:

.left{
    width:30%;
    border:3px solid #000;
}

Так как я определил ширину в%, лучший способ изменить ширину .left. Я могу грубо уменьшить ширину до 29%, но я хочу сделать точно.

Ответы

Ответ 1

Используйте свойство box-sizing: border-box. Он изменяет поведение модели окна для обработки заполнения и границы как части общей ширины элемента (но не полей). Это означает, что заданная ширина или высота элемента включает в себя размеры, установленные для заполнения и границы. В вашем случае это означает, что ширина элемента и ширина границы будут потреблять 30% доступного пространства.

Поддержка этого не идеальна, однако префиксы поставщиков будут захватывать большинство, если не все современные браузеры:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

Более подробную информацию можно найти в MDN и Quirksmode.

В соответствии с Quirksmode, используя префиксы 3 поставщика выше (-moz-, -webkit- и -ms-), вы получаете поддержку для всех браузеров, даже IE8.

Ответ 2

Самый простой способ перекрестного браузера - НЕ устанавливать границу на внешних div, а вместо этого устанавливать его на NEW div внутри .left. Простой и хорошо работает.

Ответ 3

Это немного сложно, но проверьте этот пост, чтобы обойти его:

Объект box-sizing также может вас заинтересовать, проверьте это:

Как добавить границу 1px к div, ширина которого равна проценту?

Ответ 4

Просто измените px на vw как

border-width: 10px;

border-width: 10vw;