Абсолютная проблема позиционирования

Question

Я пытаюсь написать немного CSS для своего сайта, чтобы он хорошо отображался на jQuery mobile, но у меня возникли проблемы с перестановкой некоторых элементов.

На моем обычном сайте логотип появляется перед элементом <h1>. Тем не менее, на мобильном сайте я установил мой <h1>, чтобы он отображался как заголовок с логотипом под абсолютным позиционированием. Это работает очень хорошо, пока вы не перейдете на страницу с более длинным <h1>, который падает на вторую строку на экране мобильного телефона. Это расширяет заголовок div, но не опускает логотип div вниз. Может быть, я все делаю неправильно, но я не совсем уверен, как это исправить.

Вот пример jsFiddle: http://jsfiddle.net/fvJQL/

HTML:

<div id="logo">
<img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog">
</div>

<h1 id="header-text">All About Dogs All About DogsAll About DogsAll About DogsAll About DogsAll About DogsAll About Dogs</h1>

CSS:

#header-text {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
    width: 100%;
}

#logo {
    width: 100%;
    height: 100px;
    text-align: center;
    margin-top: 40px;
}

Answer 1

Использование абсолютного позиционирования заставит H1 действовать независимо от других элементов.

Просто поместите текст над изображением, и он будет толкать другие элементы, если текст переходит на вторую строку.

Разметка

<h1 id="header-text">All About Dogs All About All About Dogs All AboutAll About Dogs All AboutAll About Dogs All About</h1>
<div id="logo">
  <img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog">
</div>

CSS

 #header-text {
 margin:0;
 display:block;
 text-align: center;
 padding: 10px;
 border: 1px solid #000;
 width: 100%;
}

#logo {
 width: 100%;
 height: 100px;
 text-align: center;
 margin-top:0px;
}

Надеюсь, это спасло: http://jsfiddle.net/fvJQL/8/

Answer 2

Вы пытались поместить логотип ниже <h1> и расположить его для обычного сайта, чтобы он опустился ниже в мобильном телефоне? Тогда вы можете удалить position:absolute: для мобильного телефона и позволить ему упасть, как обычно.