Я пытался создать сайт со следующей структурой:
Но я не могу получить правильный заголовок (e1 слева, e2 по центру, e3 справа). Я хочу, чтобы три элемента e1, e2 и e3 были расположены слева, посередине и справа. Вот что я пытаюсь:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
С помощью этой CSS:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Может ли кто-нибудь дать мне советы о том, что я могу сделать? Структура будет использоваться на мобильном сайте.
UPDATE
Код, который я имею выше, дает мне это: Но я хочу, чтобы 2 центрировались, а 3 - справа. Я не хочу устанавливать ширину в процентах, потому что содержимое в элементах может отличаться, то есть это может быть 20/60/20 - 10/80/10 - 33/33/33 или что-то еще.