Css позиционирование: как позиционировать блок/пункт под другим

У меня есть этот HTML структурироватьCss позиционирование: как позиционировать блок/пункт под другим

<img class="media-object pull-left" src="http://placehold.it/40x40"> 
<h4 class="media-heading">Heading</h4> 
<p>Paragraph lorem ipsum bla bla bla </p>

И мне нужен этот вид позиционирования enter image description here

То есть, я всегда хочу, чтобы абзац появится под изображением. Наиболее важным решением было бы дать h4 a margin-bottom, достаточный для подталкивания абзаца ниже изображения (или дать p эквивалент margin-top).

Есть ли лучший способ сделать это, не зная размер изображения и избегая использования полей для размещения элементов?

источник

2014-09-03 Leonardo

.pull-left { 
float: left; 
} 
p { 
clear: both; 
}

Вы можете сделать это немного более конкретно, используя классы или идентификаторы для <p> тега, однако.

источник

2014-09-03 15:02:09

спасибо, я думаю, это так. Но теперь, если я хочу нажать 'p' немного ниже, используя' margin-top', это не имеет никакого эффекта, пока я не достигнет расстояния в px из заголовок вместо img..so я вернулся к своей старой проблеме. – Leonardo

Добавьте дополнение к вершине. Это влияет на внутреннюю часть абзаца, поэтому должно работать. Возможно, не так, как вы хотите, чтобы он работал. –

На самом деле, только что проверили добавление поля к нижней части изображения (что мне кажется более точным), и это работает. http://jsfiddle.net/p82suhps/ –

a <img> является встроенным элементом, поэтому элементы могут располагаться рядом с ним. как ваш заголовок. чтобы решить эту проблему, вы можете обернуть <img> и <h4> внутри <div>

источник

2014-09-03 15:17:28 LiamHT

Нет необходимости в дополнительном элементе, вы можете сделать это чистым CSS, не изменяя код HTML. – LinkinTED

Сначала вы позволяете поплавок изображения влево, так что остальные два показывают на правой стороне изображения.

Заголовок не нуждается в дальнейшей настройке (в демонстрационной версии есть margin-bottom: 0, только чтобы убедиться, что маржа еще не подталкивает абзац под изображением).

Четкие обе стороны абзаца, и он переходит к следующей строке.

.pull-left { 
    float: left; 
} 
p { 
    clear: both; 
}

И конечно the demo

источник

2014-09-03 15:23:19 LinkinTED

В качестве альтернативы вы можете иметь изображение и заголовок в одном DIV, а затем пункт в другой. Вы также можете попробовать добавить padding-top:10px;, где вы можете заменить 10px тем, что будет подойдет.

источник

2014-09-03 15:53:56 spasticninja

Css позиционирование: как позиционировать блок/пункт под другим

ответ

Смежные вопросы