Заголовок, не включающий все изображения

Я поместил изображение в теги <header> моего кода, но изображение разрезается прямо через него, а заголовок не расширяется до размера изображения. Код идет что-то вроде этого:Заголовок, не включающий все изображения

<header> 
<img src="the_image.png" style="position:relative; align:right; float:right; width:40%; height:inherit" /> 
</header>

Стиль заголовка выглядит следующим образом:

header 
{ 
position:relative; 
width:Auto; 
height:auto; 
max-height:239px; 
min-height:inherit; 
background:#FFFFFF; 
}

есть ли что-нибудь сделать с позиции я использую? Почему заголовок просто не расширяется, чтобы достигнуть размера изображения (что является максимальной высотой, которую я дал)?

источник

2015-04-22 user3409468

вы можете создать скрипку? – Travis

Это потому, что ваше изображение плавает. добавление 'overflow: hidden;' в контейнер будет его исправлять. Или есть [другие методы] (https://css-tricks.com/snippets/css/clear-fix/) – Turnip

overflow: hidden; не работает. Я добавил скрипку здесь: jsfiddle.net/z707x908 – user3409468

width: Auto; неверен, он должен быть width: auto; Вы пробовали это?

Update: В качестве комментария упоминалось ранее, вы, возможно, пропустили overflow: hidden;

Вот скрипка: http://jsfiddle.net/z707x908/1/

источник

2015-04-22 13:11:16

Просто попробовал. Все еще не работает. – user3409468

Было бы здорово, если бы вы могли создать скрипку (http://jsfiddle.net) ... Я создал скрипку, но я не мог понять, что должно произойти: http://jsfiddle.net/1rzr038r/ –

Я создал его здесь: http://jsfiddle.net/z707x908/ – user3409468

Заголовок, не включающий все изображения

ответ

Смежные вопросы