Задание полное с элементом?

Question

Задание полное с элементом?

0

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .child {
                background-color: red;
                width:33.3%;
                height:200px;
                float:left;
            }

            .wraper {
                width:80%;
                height:600px;
                margin:auto;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="wraper">
            <div class="child">
                <p>some text</p>
            </div>
            <div class="child">
                <p>some text</p>
            </div>
            <div class="child">
                <p>some text</p>
            </div>
        </div>
    </body>
</html>

Я попытался настроить небольшой макет, и мне интересно, что-то странное: мне нужно установить ширину дочерних элементов на 33,3 3 %, в противном случае с правой стороны будет немного интервала. Это правильный путь? И что-то похожее: Что делать, если я хочу установить границу вокруг дочерних элементов 5px. Я действительно должен попробовать, какой процентный номер подходит? Или существует другой способ установить полную ширину дочернего элемента, включая границу, маржу и отступ, до фиксированного процентного номера? Я думаю, мне нужно немного объяснить, как эти вещи работают в html.

Reignbeaux 20 окт. 2013, в 17:03

Источник

Теги:

html

css

width

1 ответ

Ещё вопросы

jiceb · Answer 1 · 2013-10-20T11-56-00.000Z

Способ установки полной ширины в CSS заключается в использовании box-sizing:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;
}

Дополнительная информация о: http://www.paulirish.com/2012/box-sizing-border-box-ftw/