CSS: Как достичь - Два элемента должны быть центрированы и расположены рядом без третьего родительского контейнера? - PullRequest
Новая
       0

CSS: Как достичь - Два элемента должны быть центрированы и расположены рядом без третьего родительского контейнера?

2 голосов
/ 14 марта 2011

Проблема: в следующей HTML-разметке: 

<html>
  <body>
    <div id="div_1"></div>
    <div id="div_2"></div>
  </body>
</html>

Я хочу, чтобы оба div (это может быть любой другой тег) были отцентрированы и расположены рядом друг с другом. Как добиться этого с помощью CSS, без добавления третьего родительского контейнера?

1 Ответ

5 голосов
/ 14 марта 2011

Демо здесь: http://jsfiddle.net/Shehi/6RqWb/

Следующие правила CSS решают проблему: 

#div_1
{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 50%;
    margin-left: -200px; /* = -1 * the width of element */
    float: left;
    clear: none;
}

#div_2
{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    right: 50%;
    margin-right: -200px; /* = -1 * the width of element */
    float: right;
    clear: none;
}
...