border-box with percents and margin

Question

Как использовать рамку с процентами и полями? пример следует.

<style> 
.half{ 
    width: 50%; 
    float: left; 
    background: red; 
    margin: 5px; 
    box-sizing: border-box; 
      box-shadow: 0px 0px 3px black; 
} 
</style> 
<div class="half">half</div> 
<div class="half">half</div> 

я хочу DIV (.half) занять 50% экрана - запас 5px все вокруг DIV это posable каждый раз, когда я пытаюсь это делает его шире, чем на 50% и кладет вторую коробку в следующей строке я бы хотел избежать накладок на основе%, если это возможно.

Answer 1

поля никогда не вычисляются как часть ширины, даже используя box-sizing: border-box;

Так попробуйте заменить запас с border: 5px solid transparent

---

Или, если вы не можете изменить границы, в зависимости о эффекте, который вы хотите достичь, попробуйте с помощью псевдоэлементов :after/:before, например

.half { 
    width: 50%; 
    float: left; 
    background: red; 
    box-sizing: border-box; 
    box-shadow: 0px 0px 3px black; 
} 

.half:after, .half:before { 
    content: ""; 
    width: 5px; /* or more if you need more space */ 
    display: inline-block; 
} 

Пример: http://jsbin.com/imiqak/1/edit

---

Или вы можете использовать несколько вложенных элементов, например, так:

.half { 
    width: 50%; 
    float: left; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 5px; 
} 

.half p { 
    background: red; 
    box-shadow: 0px 0px 3px black; 
} 

Пример: http://jsbin.com/imiqak/3/edit

Answer 2

запас считаются нестандартно (это пространство вокруг вашей коробки, а не в коробке). Размер полей не считается частью ширины контейнера.

Действительно, когда вы вводите box-sizing: border-box;, вы имеете в виду the size of the box includes the border size, и если вы посмотрите на это изображение ниже, вы увидите, что маржа после границы, поэтому она игнорируется.

Answer 3

Попробуйте это:

CSS:

<style type="text/css"> 
.half{ 
    width: 49%; 
    float: left; 
    background: red; 
    box-sizing: border-box; 
} 

.half:last-child{ 
margin-left: 1%; 
} 
</style> 

HTML:

<div class="half">half</div> 
<div class="half">half</div>