浮動圖像在多列布局的右列頂部？

我很難找到這個解決方案，我很驚訝別人沒有在這裏或其他地方提出過同樣的問題。浮動圖像在多列布局的右列頂部？

想象一下，我有使用兩欄佈局：

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

這些列是流體的瀏覽器窗口大小，所以我的問題很簡單，我怎麼有一個形象固定的頂部右欄？

謝謝。

編輯：

下面Flixer的建議，我現在有這樣的代碼，我有工作，但不幸的是，結果是出現在像內聯元素的1列的圖像。理想的結果是圖像出現在第二列的固定位置，文字環繞它。

<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>

來源

2014-02-11 Warren

我建議：

.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)以避免圖像和文本之間的佈局衝突。

來源

2014-02-11 23:08:08 Flixer

浮動圖像在多列布局的右列頂部？

回答

相關問題