Стек плавал элементы без родительского
В верхнем примере, изображения имеют CSS
.post img{float:right;width:150px;padding-bottom:3px;}
что делает их плавать в рядах, по-видимому, потому что ограничение ширины происходит от родителя, весь пост, поэтому они не будут завертываться или складываться до тех пор, пока не будет достигнута ширина сообщения.
В нижнем примере изображение завернуто в родительском .gallery
с CSS
.gallery{float:right;width:150px;}
.gallery img{margin-bottom:3px;}
Можно ли достичь верхнего примера без упаковки в родительском? Или, можно ли динамически добавить родителя с помощью :first-child
и :last-child
селекторов и ::before
и ::after
, чтобы добавить CSS, чтобы обернуть их в DIV?
Направляющая для чистого решения CSS, если это вообще возможно. Я ударил кирпичную стену.
Edit: Добавление более полной HTML
<div class="post" style="width:600px;">
<p>
<a href="//placehold.it/150x150"><img src="//placehold.it/150x150" width="150" height="150"></a>
<a href="//placehold.it/150x150"><img src="//placehold.it/150x150" width="150" height="150"></a></p>
<p>
The Godin 5th Avenue Kingpin features a classic shape and sound for the developing musician. The 5th Avenue has a Canadian wild cherry body that produces a range of warm, developed tones. The hollowbody construction adds warmth and resonance to your overall tone. The P90 pickup has a classic 50s inspired sound that can be utilised in both studio and live situations. This model is in a classic black colour. For musicians looking at producing a traditional tone whilst having the reliability of modern designs, the 5th Avenue is the place to go.
</p>
</div>
Пример и решение CodePen: http://codepen.io/anon/pen/WoypyK
попробуйте добавить 'display: block; clear: both; 'to' .post img {... ' – Banzay
У нас есть HTML? –
@NikhilNanjappa Я добавил полный текст HTML –