2016-12-08 3 views
-1

ExampleСтек плавал элементы без родительского


В верхнем примере, изображения имеют 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

+3

попробуйте добавить 'display: block; clear: both; 'to' .post img {... ' – Banzay

+2

У нас есть HTML? –

+0

@NikhilNanjappa Я добавил полный текст HTML –

ответ

2

Вам нужно добавить display: block; clear: both; CSS-правила для .post img:

.post img { 
    float: right; 
    width: 150px; 
    padding-bottom: 3px; 
    display: block; 
    clear: both; 
} 
0
.post img { 
    clear: right; 
    float: right; 
    width: 150px; 
    padding-bottom: 3px; 
} 
Смежные вопросы