Раздел в моем HTML-проекте содержит h2 , span и figure с img внутри.h2 - заголовок секции, а фигура и промежуток плавают (например, цифра слева и шкала справа).
Макет визуально в порядке, но когда я проверяю элементы в браузере, секция устанавливает ее высоту как высоту промежутка, и фигура выходит за пределы секции (как я уже сказал - визуально элементы не перекрываются, но реальная секциявысота не так).
Это вызывает у меня проблемы, потому что на моей странице есть несколько разделов, расположенных один под другим, и мне нужно ссылаться на определенные разделы с помощью навигационных ссылок, и это приводит меня к неточному месту на странице.
Почему секция не устанавливает свою реальную высоту автоматически для высоты всех элементов внутри?В его случае, как заставить секцию иметь высоту всех содержащих элементов вместо высоты пролета?
<section class="sec1">
<h2>Header</h2>
<figure class="figureLeft">
<img src="picture.jpg" width="250" height="300" />
<figcaption><i>Picture</i></figcaption>
</figure>
<span>A few lines of text inside the span....
</span>
</section>