Размер окна не работает

Я использую свойство размера коробки, чтобы выровнять левый div, правый div и центр div в контейнере div. Div не выравниваются. Ниже приведен код, который я попробовал. Я также попытался использовать px. Я использую Firefox для проверки.Размер окна не работает

Я также добавил в jsfiddle, http://jsfiddle.net/F9ds9/

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 

    .container{ 
     width:100%;   
    } 

    #left{ 
     -moz-box-sizing: border-box; 
     margin-top:12px; 
     float:left; 
     border:1px solid #000000; 
     width:20%; 
    } 

    #right{ 
     -moz-box-sizing: border-box; 
     margin-top:12px; 
     float:left; 
     border:1px solid #000000; 
     width:20%; 
    } 


    #center{ 
     -moz-box-sizing: border-box; 
     margin:12px; 
     float:left; 
     border:1px solid #000000; 
     width:60%; 

    } 


    </style> 
    </head> 
    <body> 

    <div class="container"> 
     <div id="left">LEFT</div> 
     <div id="center">CENTER</div> 
     <div id="right">RIGHT</div> 
    </div> 

    </body> 
    </html>

источник

2014-08-02 karthik_spain

.container{ 
     width:100%;   
    } 

    #left{ 
     -moz-box-sizing: border-box; 
     margin-top:12px; 
     float:left; 
     border:1px solid #000000; 
     width:20%; 
    } 

    #right{ 
     -moz-box-sizing: border-box; 
     margin-top:12px; 
     float:left; 
     border:1px solid #000000; 
     width:20%; 
    } 


    #center { 
    -moz-box-sizing: border-box; 
    border: 1px solid #000000; 
    float: left; 
    margin-top: 12px; 
    width: 50%; 
}

источник

2014-08-02 04:45:00 Ricky

границы коробки не Маржа ящик (который, кстати, не существует :) так просто удалить margin:12px; или иметь дело с этим:)

в this demo Я только модифицирована margin:12px; для центрального элемента margin-top:12px; (так же, как и другие элементы). Если вам нужен запас, необходимый для вычисления математики по ширине элемента!

_____ _____________ _____ 
    20% 12px 60% 12px 20%

даже с использованием border-box заканчивается на сумму 100% + 24px

источник

2014-08-02 04:44:30

-1

Пожалуйста, проверьте fiddle

<body> 
    <div class="container"> 
     <div id="left">LEFT</div> 
     <div id="center">CENTER</div> 
     <div id="right">RIGHT</div> 
    </div> 
</body>

Есть некоторые вещи, которые вы должны знать

Всего: 1 00% для контейнера Левый и правый: 20% Центр: 60%

так всего 100% придет внутри контейнера

и на вершине, что вы дали Border

так будет добавьте дополнительные 6px для трех контейнеров, которые превышают 100% ширину контейнера, чтобы правая секция спрыгнула вниз.

И для центра контейнера вы не дали маржу верх

Пожалуйста, обратитесь CSS окно моделирования вы поймете. и использовать firbug в firefox для отладки, это будет проще.

источник

2014-08-02 04:55:20

* дополнительный 6PX * где, что математика родом из? Он использует 'border-box', помните? и центральный элемент имеет край 12px ... на ** все ** стороны. –

Привет, Потому что он дал -moz-border-box, это не повлияет на mozilla. –

Если вы перейдете к границе хром 1px solid для трех контейнеров, которые слева и справа для каждого раздела, потребуется дополнительно 6px. См. Моделирование полей CSS. –

box-sizing:border-box или любой другой коробки размеров вы используете модель коробки является

width + padding + border = actual visible/rendered width of an element's box, 
height + padding + border = actual visible/rendered height of an element's box.

Смотреть это демо https://css-tricks.com/box-sizing/#demo добавив избыток маржи для ребенка будет сделать это свойство бесполезный

источник

2017-07-11 10:34:03

Размер окна не работает

ответ

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