2014-02-11 2 views
0

У меня возникли проблемы с поиском решения этой проблемы, и я удивлен, что другие не задали тот же вопрос здесь или в другом месте.Плавающее изображение в верхней части правой колонки в многоколоночном макете?

Представьте себе, что у меня есть макет в две колонки с помощью:

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> 

ответ

0

Я хотел бы предложить:

.cols2 { 
    columns:80px 2; 
    -webkit-columns:80px 2; 
    -moz-columns:80px 2; 
} 
.cols2 > *:nth-child(2n) img { 
    position:fixed; 
} 

Это выбирает образ каждого второго дочернего элемента в пределах .cols2 класса-элемента (вы также можете написать .cols2 > *:nth-child(even) img, если это более интуитивным для Вас) и установить это положение исправлено. Возможно, вам нужно добавить отступы в .cols2 > *:nth-child(2n), чтобы избежать столкновений макета между изображением и текстом.

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