Блог

Я немного боюсь использовать значения с плавающей запятой, поскольку я еще не понял, как очистить значения с плавающей запятой и все хаки, которые есть в Интернете в отношении этого действия, поэтому я использовал display:inline-block для размещения двух divs встроенным способом. Их контейнер имеет

 width:auto;
max-width:900px;
 

и каждый из divs имеет

 display:inline-block;
width: 450px;
 

Теперь, что бы я ни делал, второй div всегда переходит на другую строку прямо под первым div.

Вот код: http://codepen.io/anon/pen/xgtFd

Я уже изменил ширину двух разделов, например

 width:440px;
 

но это не помогло. Тем не менее, второй div немного «не на месте». Это странно, потому что я создавал веб-сайт и использовал практически тот же подход к своему заголовку, что и в этом проекте. Пожалуйста, помогите мне определить проблему.

Я был бы рад любой помощи.

Ширина слишком велика.

Уменьшите навигацию примерно до 446px, и они вернутся в строку.

Почему 444px вместо 450 пикселей? Две причины:

1. Ваша граница занимает 2 пикселя.
2. Между <div> тегами в вашей разметке есть пробелы, что отражается на рендеринге. Если вы хотите, чтобы он мог увеличить его до 450 пикселей, поместите закрывающий тег div и следующий открывающий тег div рядом, вот так: </div><div id="nav">

Если вы хотите сохранить границу и установить ширину в 450 пикселей, тогда вам следует проверить box-sizing и использовать box-sizing: border-box; .

Редактировать:
Чтобы решить ваши проблемы с выравниванием по вертикали, вам необходимо применить vertical-align: top; к элементам div (разделениям навигации и логотипа).

И ul не центрируется, потому что, когда вы применяете display:block к нему, он заполняет всю ширину. Таким образом, вы могли бы либо центрировать содержимое div с text-align: center помощью on ul , либо вы могли бы сделать ul display: inline-block .