проблема с шириной: 50%, когда граница! = нет (CSS)

Question

проблема с шириной: 50%, когда граница! = Нет

посмотрите http://jsfiddle.net/5nYSf/

результат должен быть таким

Answer 1

Вы можете поместить два элемента рядом друг с другом, ширина которых составляет 50%, затем вы можете поместить еще один элемент внутри каждого, который должен иметь поля и границы:

Answer 2

Есть простой способ: добавить {box-sizing: border-box;} в .attachments, а ширина 50% также будет содержать границу

Answer 3

Если ваши границы имеют фиксированную ширину, вы можете вычесть длину границы из вашей ширины элемента, используя функцию calc () в вашем CSS.

.attachments {
height:80px;    
background-color:#E4E4E4;
}

.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}

http://jsfiddle.net/5nYSf/277/

Answer 4

Хитрость в том, что границы и поля не учитываются при расчете высоты / ширины.Итак, если у вас есть элемент с шириной 100px, границей 2px и левым полем 10px, будет использовано 114px горизонтального пространства.(Граница считается дважды: слева и справа.) IIRC, отступы тоже не включены, но я не уверен в этом.

Есть несколько вариантов решения этой проблемы.Вы можете иметь width:49% на обоих элементах или width:50% на первом и занять второе место, чтобы занять остальные.
Если оба элемента должны занимать ровно одинаковое пространство, вы можете включить каждый в свой div.Эти div не будут иметь границы / поля / заполнения и занимают ровно 50% пространства, а граница будет указана во внутреннем элементе.

Последний метод в действии:
http://jsfiddle.net/5nYSf/35/

Answer 5

граница расширяет рамку.

50% + граница> 50%

Вы должны уменьшить ширину:

.attachments {
    height:80px;    
    background-color:#E4E4E4;
}

.attachments span {
    display:inline-block;
    height:100%;
    width:48%;
    background-color:#9FB9CA;
    border:3px #879AA8 solid;
}

Answer 6

Не забудьте учесть эти поля (чтобы показать светло-серые области) и что вы не можете использовать высоту: 100% по тем же причинам, по которым вы не можете использовать ширину: 50% (как описано другими здесь)

Answer 7

Граница является дополнением к определенной ширине, поэтому граница 50% + 50% + 3 пикселя (с обеих сторон) в конечном итоге составляет 100% + 12 пикселей, что на 12 пикселей больше, чем содержащий элемент (100%). Попробуйте использовать 49% или другое измерение, которое оставит 12px для границы.