Блок дисплея не работает, как думал ...?

Question

Я знаю, что это распространенный вопрос, и я уже пробовал поискать методы. Вот jsfiddle: http://jsfiddle.net/ZfZK9/ и вот моя проблема

По сути, у меня есть основной контейнер div. У этого есть изображение и некоторый текст. Мне нужно изображение на одной стороне, а затем текст на другой. Я попытался поместить img в div, установить его высоту на 100% и переместить его правильно, но, как вы можете видеть в jsfiddle, когда текст идет ниже изображения, он не сохраняет формирование столбца.

Я не уверен, почему дисплей: блок и высота: 100% не приносят пользы в левой колонке.

Спасибо

Редактировать: Я предполагаю, что высота: 100% не работает, потому что это отображается, а затем текст добавляется позже. Я все еще пытаюсь найти элегантное решение общего назначения.

Другая проблема, когда я устанавливаю оба элемента div (изображения и текста) как float: left, он просто отображает изображение, а затем текст под ним

Answer 1

Это можно сделать так: http://jsfiddle.net/ZfZK9/34/

Просто создайте два элемента div в виде столбцов вокруг обеих сторон, затем установите обе эти стороны на определенную ширину, затем поэкспериментируйте с отступами и полями, пока не получите желаемое.

Чтобы сохранить границы вокруг вашего контента, я добавил clearfix, который поможет содержать два плавающих столбца ....

http://jsfiddle.net/ZfZK9/34/

Пришлось отредактировать несколько вещей, потребовалось немного, чтобы понять это правильно, но теперь все должно работать. Содержит два плавающих элемента div с добавленным в микширование доказательством браузера. Если вы хотите, чтобы изображение или боковая панель выглядели так, как будто она продолжается вниз, прочитайте о Faux Columns

Answer 2

У вас есть некоторые CSS в HTML и некоторые в CSS, так что это трудно понять.То, что я считаю, я вижу, является распространенной ошибкой, когда вы должны учитывать, когда вы устанавливаете что-то на 100%, вы должны думать, 100% чего?Это всегда родитель этого элемента.Так какой родитель установлен?Если ничего, то твоя проблема.

Просто помните, что если родитель также установлен на 100%, тот же вопрос будет применяться.

РЕДАКТИРОВАТЬ: я вижу проблему сейчас.Я неправильно понял.То, что вы хотите сделать, это установить ширину правого div, который с текстом.Перемести это право, и оно должно решить проблему.