пытаюсь поставить <h1> title </ h1> над моим изображением

Question

пытаюсь поставить <h1> title </ h1> над моим изображением

0

Я пытаюсь что-то сделать, но я не знаю, возможно ли это.

У меня есть html-структура для настольных и планшетных устройств и ее работоспособность, но теперь для мобильных устройств я хочу немного изменить структуру своих новостей.

В мобильной версии я хочу поместить мой <h1>Title of the news</h1> над изображением, но он появляется под изображением, потому что в моем html у меня есть заголовок сначала, но я не хочу менять свою html-структуру, его невозможно поместить мой заголовок выше моего изображения только с CSS?

Я пробовал некоторые тесты, но ничего не работает!

Я привел свой пример в эту скрипку:

http://jsfiddle.net/Zkpj7/

Для лучшего понимания у меня есть эти изображения, чтобы показать, что я хочу:

OzzC 04 май 2014, в 23:21

Источник

0

Используя position: absolute; Вы можете поместить элемент в любое место, но он будет немного хакерским и нестабильным.
PhistucK 04 май 2014, в 21:37

Теги:

html

css

css3

responsive-design

2 ответа

1

Все ответы CSS будут менее идеальными, поскольку CSS предназначен для изменения стиля, а не структуры. Я бы рекомендовал использовать jquery. Позвоните по этому идентификатору, чтобы заголовок и изображение изменили их порядок.

$("#title").insertBefore("#pic");

Если вы хотите, добавьте что-то подобное, чтобы стрелять, когда размер экрана становится слишком маленьким (установите любой порог, который вы хотите).

$( window ).resize(function() {
  if($(window).width() < 400){
     $("#title").insertBefore("#pic");
  }
});

JRulle 04 май 2014, в 20:52

0

Спасибо, кажется хорошим решением, но я проверяю это, если ($ (window) .width () <180) {alert ('hello')} и в смартфоне sony ericsson live walkman, сообщение появляется, но в Samsung Galaxy Express не появляется сообщение. И разрешение составляет 480 пикселей! Я уже попробовал с if ($ (window) .width () <960) {alert ('hello')}, но в Samsung все еще не появляется!
OzzC 04 май 2014, в 22:39
0

Может быть, лучший способ - создать в моем html новый div и показать, что новый div в мобильных версиях и в мобильных версиях скрывает div для настольных ПК и планшетов, нет?
OzzC 04 май 2014, в 22:40
0

Так как article - это контейнер с относительным позиционированием, абсолютное позиционирование должно быть в порядке. Изменение разметки было бы намного лучше ... использование JQuery для такой вещи кажется такой же плохой практикой, как и сохранение разметки такого рода ... однако, если вы в конечном итоге сделаете это таким образом, обязательно добавьте $ (документ) .ready (...); так же: p
sebastian 04 май 2014, в 22:42
0

$ (window) .width дает вам ширину области просмотра смартфонов, которая обычно намного больше, чем фактическая ширина устройства. Пиксели - это угловое измерение, но не хочу вас смущать, просто добавьте в заголовок вашей страницы следующее: <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, Maximum- масштаб = 1,0, масштабируемый пользователем = нет "/>
sebastian 04 май 2014, в 22:46

Показать ещё 2 комментария

Ещё вопросы

Используя position: absolute; Вы можете поместить элемент в любое место, но он будет немного хакерским и нестабильным.
Спасибо, кажется хорошим решением, но я проверяю это, если ($ (window) .width () <180) {alert ('hello')} и в смартфоне sony ericsson live walkman, сообщение появляется, но в Samsung Galaxy Express не появляется сообщение. И разрешение составляет 480 пикселей! Я уже попробовал с if ($ (window) .width () <960) {alert ('hello')}, но в Samsung все еще не появляется!
Может быть, лучший способ - создать в моем html новый div и показать, что новый div в мобильных версиях и в мобильных версиях скрывает div для настольных ПК и планшетов, нет?
Так как article - это контейнер с относительным позиционированием, абсолютное позиционирование должно быть в порядке. Изменение разметки было бы намного лучше ... использование JQuery для такой вещи кажется такой же плохой практикой, как и сохранение разметки такого рода ... однако, если вы в конечном итоге сделаете это таким образом, обязательно добавьте $ (документ) .ready (...); так же: p
$ (window) .width дает вам ширину области просмотра смартфонов, которая обычно намного больше, чем фактическая ширина устройства. Пиксели - это угловое измерение, но не хочу вас смущать, просто добавьте в заголовок вашей страницы следующее: <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, Maximum- масштаб = 1,0, масштабируемый пользователем = нет "/>

sebastian · Accepted Answer · 2014-05-04T19-45-00.000Z

Попробуйте изменить CSS следующим образом:

#news
{
    height:140px; 
    margin-bottom:5px; 
    border-bottom:1px solid #f3f3f3;
    padding-bottom:43px;    
    position:relative;
    padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}

#news h2 {
    position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
    margin: 0px;
}

#news span 
{
    color:#7a7a7a;
    position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}

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

Я бы предложил изменить разметку: p

http://jsfiddle.net/Zkpj7/9/

Спасибо, ваш код работает, но с некоторыми проблемами! Потому что мой абзац и дата появляются за заголовком и изображением!
Да спасибо! Это сработало, мне действительно нужно лучше понять положение относительное и абсолютное! Но вы думаете, это правильно делать?
Абсолютно правильно использовать абсолютное позиционирование, хотя вы должны быть осторожны при его использовании. Если вы планируете весь свой сайт с абсолютным позиционированием, вы столкнетесь с проблемами из-за разного размера экрана и шрифта на клиенте вашего пользователя. Однако в определенном контексте - содержащем элемент - обычно хорошо использовать абсолютное позиционирование. Контейнер должен быть расположен относительно, поэтому абсолютные позиции, такие как top, left и т. Д. Будут соответствовать границам контейнера.