Выравнивание двух строчных блоков слева и справа на одной строке

Редактировать: 3 года с тех пор как я ответил на этот вопрос, и я думаю, нужны более современные решения, хотя тока один делает вещь :)

1.Основе

Это'ы однозначно самый короткий и самый гибкий. Применить дисплей: шлейф; в Родительском контейнере и отрегулировать размещение детейоправдать-содержание: пространство-между;` такой:

.header {
    display: flex;
    justify-content: space-between;
}

Можно посмотреть онлайн здесь -

Заметим, однако, что поддержка адаптируемых блоков является IE10 и выше. Если вам нужна поддержка IE 9 или старше, используйте следующее решение:

2.Вы можете использовать текст-выровняйте: здесь техника оправдать`.

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

Рабочий пример можно увидеть здесь: http://jsfiddle.net/skip405/NfeVh/4/. Этот код работает с IE7 и выше

Если инлайн-блочные элементы в HTML не через пробел, это решение выиграл't работа - см. Пример http://jsfiddle.net/NfeVh/1408/ . Это может быть случай, когда вы вставляете контент с помощью JavaScript.

Если мы не'т заботиться о ИЕ7 просто опустить звезда-поделка свойства. Рабочий пример с использованием разметки здесь - http://jsfiddle.net/skip405/NfeVh/5/. Я просто добавил заголовок:После части и обосновано содержание.

Для того, чтобы решить проблему дополнительного пространства, который вставляется с "после" псевдо-элемента можно сделать трюк настройка размер шрифта 0 для родительского элемента и сброс ее обратно, чтобы сказать 14px для дочерних элементов. Рабочий пример этого трюка можно посмотреть здесь: http://jsfiddle.net/skip405/NfeVh/326/

Воспользовавшись @skip405'ы ответ, Я'ве сделал Сасс миксин для него:

@mixin inline-block-lr($container,$left,$right){
    #{$container}{        
        text-align: justify; 

        &:after{
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
            font-size:0;
            line-height:0;
        }
    }

    #{$left} {
        display: inline-block;
        vertical-align: middle; 
    }

    #{$right} {
        display: inline-block;
        vertical-align: middle; 
    }
}

Он принимает 3 параметра. Контейнер, левый и правый элемент. Например, чтобы соответствовать вопрос, вы могли бы использовать его как это:

@include inline-block-lr('header', 'h1', 'nav');

Если вы не хотите использовать float, то вам придется обернуть свой nav:

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>

...и добавить несколько более специфических css:

header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

h1 {
display: inline-block;
margin-top: 0.321em;
}

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

nav {
display: inline-block;
vertical-align: baseline;
}

Возможно, вам потребуется сделать больше, но это только начало.

Я думаю, что одним из возможных решений этой проблемы-использовать дисплей: таблицы`:

в

.header {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.header > * {
  display: table-cell;
}

.header > *:last-child {
  text-align: right;  
}

h1 {
  font-size: 32px;
}

nav {
  vertical-align: baseline;
}

JSFiddle:

Если вы уже используете JavaScript для центрирования материала, когда экран слишком мал (как в вашем комментарии к заголовку), то почему бы просто не отменить floats/margins с помощью JavaScript и не использовать floats и margins в обычном режиме.

Можно даже использовать CSS media queries, чтобы уменьшить количество используемого JavaScript.

Новые способы для выравнивания элементов права:

Сетка:

.header {
        display:grid;
        grid-template-columns: 1fr auto;
    }

Демо

Прихлоп 4. Выровнять по правому краю:

<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

Демо

Для обоих элементов использовать

display: inline-block;

для 'книжка' использование элементов

float: right;

придать ему float: right, а h1 float:left и поместить после них элемент с clear:both.