Как протолкнуть заголовок рядом с частью контейнера?

Question

У меня есть некоторый HTML:

<div id="thing">
  <div id="contentheader">
    <h3>Header</h3>
  </div>
  <div id="contentcontainer">
    <div id="image">
      <img alt="balt" src="imagesrc">
    </div>
    <div id="body">
      <p>hegl gegl</p>
    </div>
  </div>
</div>

Мне нужно сдвинуть h3 в 'contentheader' вниз вдоль изображения в 'contentcontainer', в то время как основной текст находится рядом с ним.Все имеет переменную ширину, за исключением изображения.

Возможно, изображение будет демонстрироваться лучше:

Как видите, серый цвет соответствует «вещи», зеленыйс 'contentcontainer' и синим с 'contentheader'.

Редактирование HTML будет большой проблемой.Я также не могу сделать ничего, кроме изображения с фиксированной шириной.Возможно ли сделать это только с помощью CSS?(Было бы здорово иметь возможность делать это с помощью поплавков и прочего, но я не знаю, выполнимо ли это)

Answer 1

Не думаю, что вы найдете идеальное решение с помощью CSS. Вы могли бы использовать позиционирование, но вы, вероятно, столкнулись бы с проблемами, если бы у вас был длинный заголовок, который занимал более одной строки.

Если вы открыты для использования javascript, то будет работать следующий не-каркасный фрагмент.

// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);

Вы можете воссоздать этот код как аккуратный, однострочный, используя jQuery или другую инфраструктуру javascript.

Answer 2

Отвечая Thirtydot в разделе комментариев, я решил мою проблему.

Answer 3

Проблема здесь в структуре HTML, она написана не совсем с вашей целью (что облом!)

Если все, что вам нужно, это толкать контейнер «содержимого заголовка» H3 в соответствии с остальной частью содержимого внутри «содержимого содержимого», вы можете установить отрицательное верхнее поле для содержимого содержимого, чтобы вытянуть его вверх, а затем добавить положительное верхнее поле для элементов в 'contentcontainer', которые должны уменьшаться (в данном случае 'image'), создавая впечатление, что секция h3 фактически находится вместе с остальным содержимым. Это что-то вроде хака, но это может помочь, если вы не можете изменить HTML.

Answer 4

Конечно, вот Css для элементарной установки:

http://jsfiddle.net/Nkapr/

Спросите, если у вас есть какие-либо вопросы.