определение размеров элементов HTML с границами - PullRequest
Новая
       3

определение размеров элементов HTML с границами

2 голосов
/ 29 февраля 2012

У меня есть вопрос, который может показаться очень простым, но он довольно долго меня беспокоил.

Моя проблема с процентами ширины. Скажем, у меня есть контейнер div на 800px и 2 элемента div, которые оба установлены на float: left и width 50%. Это сделало бы их бок о бок и заполнило бы контейнер, однако, если бы я захотел добавить границу к этим внутренним элементам, это сделало бы их слишком большими, чтобы их можно было разместить внутри контейнера рядом друг с другом, и сделал бы одно падение ниже другого.

Итак, мой вопрос: существует ли метод определения размера для автоматического заполнения контейнера, который учитывает границы без необходимости вручную указывать ширину пикселя (в случае контейнера 800 пикселей каждый из двух элементов div с границей в 1 пиксель будет сделать каждый div шириной 398 пикселей ...)?

спасибо

1 Ответ

3 голосов
/ 29 февраля 2012

Да, есть метод с именем box-sizing, напишите это: 

    .parent{
    overflow:hidden;
    width:800px;
}
.child{
    width:50%;
    float:left;
    background:red;
    border:2px solid green;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box; 
}

Проверьте это http://jsfiddle.net/QevgD/

прочитайте эту статью http://www.quirksmode.org/css/box.html

Но это работает доIE8 и выше.

...