div с шириной% и границей px - PullRequest
Новая
       41

div с шириной% и границей px

4 голосов
/ 16 февраля 2012

Я пытаюсь создать div с 3 div внутри. 

    .outter
    {
        right: 100px;
        border: 10px solid white;
    }
    .main
    {
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    .left
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: green;
        border-right: 5px solid white;
    }
    .center
    {
        float: left;
        width: 40%;
        height: 100%;
        background-color: red;
        border-left: 5px solid white;
        border-right: 5px solid white;
    }
    .right
    {
        float: right;
        width: 20%;
        height: 100%;
        background-color: orange;
        border-left: 5px solid white;
    }



<div class="outter">
    <div class="main">
        <div class="left">
        </div>
        <div class="center">
        </div>
        <div class="right">
        </div>
    </div>
</div>

Это то, что я получил до сих пор. - Родительский div должен иметь правильное расстояние, фиксированное в 100px, границу в 10px белого цвета, а widht будет 100% - 100px; -Внутри div имеет 40% + 40% + 20% с расстоянием между ними 10 пикселей (поэтому я поставил границы слева-5 и справа-рамки 5.

enter image description here

У меня проблемы с настройкой. Что мне нужно, так это иметь фиксированные размеры границ и поля справа. остальные элементы должны быть динамическими, чтобы заполнить 100% ширину.

Кто-нибудь может мне помочь?

С уважением,

Ответы [ 2 ]

5 голосов
/ 16 февраля 2012

Вы можете использовать box-sizing для этого.напишите так: 

.main,
.main >*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Проверьте это:

http://jsfiddle.net/ubtdT/

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

У вас проблема с коробочной моделью . Элемент не может иметь ширину 100%, а затем границу 10 пикселей, потому что граница добавляется за пределами ширины 100%, что вызывает вашу проблему.

В зависимости от того, какие браузеры вы намереваетесь поддерживать, вы можете использовать свойство CSS3 box-sizing . Установив box-sizing: border-box;, вы можете заставить браузер вместо этого визуализировать блок с указанной шириной и высотой, а также добавить рамку и отступы внутри блока. Который должен решить вашу проблему. Обратите внимание на ограниченную поддержку в старых браузерах.

Если вы хотите пойти еще более экспериментально, вы можете использовать новый CSS3 calc() для фактического вычисления динамической ширины: 

/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
...