Позиция относительно другого элемента

Рейтинг: 0Ответов: 3Опубликовано: 16.12.2014

У меня в шапке есть адрес, телефон и поиск.

Телефон должен располагаться по центру страницы, а адрес и поиск относительно телефона по центру слева и справа. Как это лучше оформлять в css?

http://goo.gl/dHOhYo - вот так должно получиться в результате

Ответы

▲ 3

Если вы не используете никаких фреймворков для сетки, то можно сделать так:

HTML:

<div class="header">
  <div class="header-item address">Адрес</div>
  <div class="header-item phone">Телефон</div>
  <div class="header-item search">Поиск</div>
</div>

CSS:

.header {
   width: 600px; // Напишите нужную ширину
}
.header-item {
   background: #aaa;
   float: left;
   width: 33.33%; // Можно для каждого блока задать свою ширину
}
.phone {
   background: #ccc;
   text-align:center;
}
.search {
  text-align:right;
}

Это один из вариантов, возможны и другие, вот как это выглядит

▲ 2

HTML:

<div class="container">
    <div class="header">
        <div class="address">Адрес</div>
        <div class="search"><input type="text"></div>
        <div class="phone">+ 12345667</div>
    </div>
</div>

CSS:

.container {
    margin: 0 auto;
    width: 1000px;
}

.header {
    background: #aaa;
    padding: 20px;
}
.header:after {
    clear: both;
    content: '';
    display: block;
}
.address {
    float: left;
}
.search {
    float: right;
}
.phone {
    margin: 0 200px;
    text-align: center;
}

Демо

▲ 2

Также можно так http://jsfiddle.net/o7gh4ohe/

HTML

<header>
    <div class="col col-left">
        <p>Text text text</p>
    </div>
    <div class="col col-center">
        <p><strong>+7 123456789</strong></p>
    </div>
    <div class="col col-right">
        <form>
            <input type="search" placeholder="Search" />
        </form>
    </div>
</header>

CSS

*{
    padding: 0;
    margin: 0;
}

header{
    width: 600px;
    margin: 0 auto;
    display: table;
    height: 100px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-family: 'Segoe UI';
}
header .col{
    display: table-cell;
    vertical-align: middle;    
    width: 200px;
}
header .col-center{
    text-align: center;
    font-size: 16px;
    background: #ccc;
}
header .col-right{
    text-align: right;
}