Вот как вы можете решить это:
считать тело 90%, что будет означать 90% экрана независимо от его размера.
body{
width:90%;
margin: 0 auto;
}
Теперь рассмотрим контейнер классавнутри тега body
.container{
width:100% //This would utilize the complete 90% of the body, if you make the width 90% for container then it would consider 90% of 90% of body
margin: auto;
}
Теперь представьте, что вам нужен макет сетки из 5 столбцов, и вы решаете, что между каждым столбцом есть желоб 2 пикселя, а затем 100% - (2% + 2% + 2% + 2%) = 92% (я не добавил еще 2%, потому что у вас будет поле margin-left или margin-right = 0)
Теперь разделите 92/5 (процент / столбцы) так, как вы быполучить значение 18,4%.Это означало бы выделение 18,4% ширины для каждого столбца, который вы создаете, и вы получите идеальный макет, который вы хотите.
Вот пример, который может объяснить вам, скопировать весь код и вставить в пустой файл и сохранитьэто как index.html или любое имя и запустите:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percentage Width</title>
<meta charset="utf-8">
<meta name="description" content="Demo">
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body{
width:100%;
margin: 0 auto;
}
.container{
width:90%;
margin:auto;
text-align:center;
background: #363F3C;
overflow: hidden;
}
.column_5{
overflow: hidden;
width:100%; // This means full 90% of the parent element .container
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5{
background:#399FDD;
width:18.4%;
margin: 0 2% 2% 0;
float:left;
}
.grid_5{
margin-right:0;
}
p{
color:#505054;
text-align:left;
padding:1.5em;
}
</style>
<body>
<div class="container">
<div class="column_5">
<div class="grid_1"><p>1st Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_2"><p>2nd Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_3"><p>3rd Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_4"><p>4th Column: <br />184px/1000px <br />18.4% </p></div>
<div class="grid_5"><p>5th Column: <br />184px/1000px <br />18.4% </p></div>
</div>
</div>
</body>
</html>
Запустите приведенный выше пример и играйте немного больше, и вы должны получить хорошее представление.Если вам нужна помощь, свяжитесь со мной.
С уважением, Удит Гоенка http://www.iuditg.com