Поместите элемент, разделенный на css

Question

У меня есть заголовок/маленький текст, расположенный в правой части контейнера div.

HTML:

<div id="img"></div> 
<h2>Heading<small>A long long text</small></h2> 

CSS:

#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
} 

FIDDLE: http://jsfiddle.net/U8BnX/

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

Я попытался это следующим образом, но это не удается, когда контейнер DIV шире, так как прокладка устанавливаются на статическое значение , (http://jsfiddle.net/4p7qh/) Есть ли лучший способ сделать это?

Answer 1

Вот чистый CSS решение:

Это, как я бы, вероятно, изменить структуру HTML для обеспечения большей гибкости. Я добавил элемент контейнера и взял небольшой элемент из элемента заголовка:

<div class="container"> 
    <div id="img"></div> 
    <h2>Heading</h2> 
    <small>A long long text</small> 
</div> 

Изменено таблицы стилей:

/* Common styles */ 
#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
} 

/* Layout 1 */ 
.container h2 { display:inline; font-size:24px; } 
.container small { font-size:20px; font-weight:bold; } 


@media screen and (max-width: 500px) { 
    /* Layout 2 */ 
    .container { 
     position:relative;   
    } 

    .container h2 { position:absolute; top:-20px; left:0; } 
    .container { padding-top:40px; } 
} 

Живой пример:

http://jsfiddle.net/U8BnX/2/

ограничьте область просмотра , макет 2 срабатывает, когда ширина составляет 400 пикселей или ниже. Несмотря на то, что это не идеальное решение, это все равно работает, если вы измените размер элемента #img.

Answer 2

Смотрите, если это помогает

#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float:left; 
    margin-top:30px; 
} 
h2{ 
    left:-50px; 
    position:relative; 
} 
small{ 
    display:block; 
text-indent:60px; 
}