Объясните, пожалуйста, почему в данном случае некорректно отображаются три колонки, свёрстанные DIV'aми

Question

[Никита Геннадич]

Всю голову сломал уже... Вроде правильно всё, не могу ошибку найти. Это должны быть три блока, у левого и правого из них задана ширина - 30%. Средний, по идее, должен растягиваться на оставшееся место. У меня же постоянно правая картинка в каждой строчке съезжает вниз (скрин ниже)... Как я только не пробовал уже. Проблема явно в прослойке между стулом и монитором.

<div>
<div style="position:relative; float: left; display: inline; width: 30%;"><img src="01.jpg">
<br />Автор</div>&nbsp;
<div style="position: relative;  display: inline;  margin: 0 auto;"><img src="02.jpg">
<br />Чимборасо (6300 м)</div>&nbsp;
<div style="position: relative;  float: right; display: inline; width: 30%;"><img src="03.jpg">
<br />Каямба (5800 м)</div>
</div>

<div>
<div style="position: relative;  float: left;  display: inline;  width: 30%;"><img src="04.jpg" >
<br />Лама</div>&nbsp;
<div style="position:relative; display: inline; margin: 0 auto;"><img src="05.jpg">
<br />На фоне Чимборасо</div>&nbsp;
<div style="position:relative; float: right; display: inline; width: 30%;"><img src="06.jpg">
<br />Подъем на Каямба</div></div>

Скрин:

Answer 1

[Дмитрий Б]

Так понимаю у второго дива не указана ширина. Думаю правильно было бы всем float: left указать.
  между дивами лучше убрать

Comments

[Никита Геннадич]

Спасибо, убрал у правого float вообще, среднему добавил float: left, всё более менее пришло в норму.

А не объясните, почему так происходит? Логично же ведь, что средний элемент не должен иметь флоата... Во всяком случае с двумя элементами это обычно проканывало.

[Дмитрий Б]

@Psychosynthesis float придаёт обтекание блоку, причин такой ситуации может быть несколько. Я обычно читаю что к чему на htmlbook.ru/css . Почти всегда нахожу там, то что надо

Answer 2

[Юрий Лобанов]

Прочитайте про inline, vertical-align
htmlbook.ru/css/display
htmlbook.ru/css/vertical-align
Посмотрите вот этот пример codepen.io/iiil/pen/JljFn
Если коротко, Вы используете display: inline, превращая блочные элементы в встроенные. А к ним применяется vertical-align, который по умолчанию стоит baseline. Из-за этого картинка едет вверх, так как она выше соседних.

Да, и на inline элементы вообще не надо навешивать обтекания - регулируйте text-align, ширина в 30% на них вообще не действует, как и заданная в процентах. Вы явно плаваете в html/css.