У меня возникли проблемы с поиском решения этой проблемы, и я удивлен, что другие не задали тот же вопрос здесь или в другом месте.Плавающее изображение в верхней части правой колонки в многоколоночном макете?
Представьте себе, что у меня есть макет в две колонки с помощью:
columns:100px 2;
-webkit-columns:100px 2;
-moz-columns:100px 2;
Эти колонки жидкость в окно браузера изменяется, так что мой вопрос просто, как я изображение фиксируется на верхней части правая колонка?
Спасибо.
EDIT:
С предложением Flixer в поле ниже, теперь у меня есть это как код, я работаю с, но, к сожалению, результат изображение появляется в первой колонке, как строковый элемент. Идеальный результат - изображение, появляющееся в фиксированном положении во втором столбце с обтеканием текстом вокруг него.
<style>
.cols2 {
columns:350px 2;
-webkit-columns:350px 2;
-moz-columns:350px 2;
}
.cols2 > *:nth-child(2n) img {
position:fixed;
padding: 5px;
}
</style>
<div class="cols2">
<img src="myimg.png" width="300" height="200" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique urna id nisi
consequat, vel faucibus eros sollicitudin. Nam interdum ipsum justo, sit amet dignissim
tortor adipiscing cursus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique urna id nisi
consequat, vel faucibus eros sollicitudin. Nam interdum ipsum justo, sit amet dignissim
tortor adipiscing cursus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique urna id nisi
consequat, vel faucibus eros sollicitudin. Nam interdum ipsum justo, sit amet dignissim
tortor adipiscing cursus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique urna id nisi
consequat, vel faucibus eros sollicitudin. Nam interdum ipsum justo, sit amet dignissim
tortor adipiscing cursus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique urna id nisi
consequat, vel faucibus eros sollicitudin. Nam interdum ipsum justo, sit amet dignissim
tortor adipiscing cursus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.<br /><br />
</div>