Psychosynthesis
@Psychosynthesis
Fullstack developer and radio engineer

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

Всю голову сломал уже... Вроде правильно всё, не могу ошибку найти. Это должны быть три блока, у левого и правого из них задана ширина - 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>


Скрин:

4dff5d9a14f8469883a5909516232018.jpg
  • Вопрос задан
  • 2704 просмотра
Пригласить эксперта
Ответы на вопрос 2
@PiloTeZ
...
Так понимаю у второго дива не указана ширина. Думаю правильно было бы всем float: left указать.
  между дивами лучше убрать
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Прочитайте про 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.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы