Проблемы с границами CSS

Im в настоящее время пытается сделать квадрат с четырьмя маленькими квадратами внутри, и у меня были проблемы с тем способом, который я пытался сделать. Так это код:Проблемы с границами CSS

#grandbox { 
 
    position: absolute; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

Я хотел сделать стиль CSS границ:

border: 2px solid black

Но если я что коробки просто вырваться из более крупная коробка и отображаются вертикально.

Я довольно новичок с этим, так как в настоящее время я начал свою карьеру, но я не понимаю, почему это не работает.

PS: Извините, если плохой английский, не мой первый язык.

источник

2016-08-05 Yacomini

Обычно ширина границы добавляется к заданной ширине. С правилом box-sizing: border-box; вы можете включить границу в ширину, чтобы у вас больше не было перерыва. Смотрите этот фрагмент кода:

#grandbox { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
    box-sizing: border-box; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

См https://developer.mozilla.org/de/docs/Web/CSS/box-sizing для получения дополнительной информации о прокате проклейки.

источник

2016-08-05 13:16:39 andreas

Таким образом, я не говорил браузеру, как размер его? Спасибо, что объяснили это! – Yacomini

Вы не говорили браузеру о включении границы в свою инструкцию ширины. Thatswhy элементы '.smallbox' были больше 100px из-за их ширины границы. – andreas

Браузеры используют _by default_ стандартную коробчатую модель. С помощью 'box-sizing: border-box' вы говорите, что он переключается на эквивалентную модель окна IE6, которая на самом деле была презираемой, а на самом деле - cough_ way. Очень хорошее резюме на https://css-tricks.com/box-sizing/ (вам не нужно выбирать размер окна на псевдох ИМХО, но кроме этого этот универсальный ящик ... гениальный.Вы можете смешивать плагин, который использует другую модель коробки, какую бы модель вы не использовали) – FelipeAls

Наружная коробка должна быть размещена relative и четырьмя внутренними коробками absolute. Тогда вам просто нужно разместить их, используя leftrighttopbottom Недвижимость.

#grandbox { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
} 
 
div.sb1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.sb2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
div.sb3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
div.sb4 { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox sb1"> 
 

 
    </div> 
 
    <div class="smallbox sb2"> 
 

 
    </div> 
 
    <div class="smallbox sb3"> 
 

 
    </div> 
 
    <div class="smallbox sb4"> 
 

 
    </div> 
 
</div>

Вот jsbin версия.

источник

2016-08-05 13:13:48

EDIT: Мой ответ - скорее решение для взлома. Принятый ответ выше, который включает в себя размер коробки, автоматически включающий границы в ширину, является лучшим ответом.

В исходном расчете высоты и ширины (204) Я не думаю, что вы считали, что обе стороны каждого квадрата имеют дополнительные 4 пикселя больше.

Регулировка ширины и высоты до 208px должна решить вашу проблему.

#grandbox 
 
    { 
 
     position: absolute; 
 
     width:208px; 
 
     height:208px; 
 
     border: 2px solid black; 
 
     left:40%; 
 
     top: 8%; 
 
    } 
 

 
div.smallbox 
 
    { 
 
     border: 2px solid black; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 100px; 
 
     float: left; 
 
     line-height: 100px; 
 

 
    }

<body> 
 
    <div id="grandbox"> 
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    </div> 
 
</body>

источник

2016-08-05 13:17:11 Adam

Проблемы с границами CSS

ответ

Смежные вопросы