多列布局中右列頂部的浮動圖片？

Question

我在尋找解決方案時遇到了麻煩，其他人在這里或其他地方沒有提出相同的問題，我感到很驚訝。

想象一下，我有一個兩列的布局，使用：

columns:100px 2;
-webkit-columns:100px 2;
-moz-columns:100px 2;

這些列隨瀏覽器窗口大小的調整而變化，所以我的問題很簡單，如何在右側列的頂部固定圖像？

謝謝。

編輯：

在下面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>

Answer 1

我會建議：

.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(even) img ），並將其位置設置為固定。 也許您需要在.cols2 > *:nth-child(2n)添加填充，以避免圖像和文本之間的布局沖突。