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 class-element中每个第二个子元素的图像（如果它对您更直观，也可以编写.cols2 > *:nth-child(even) img）并将其位置设置为fixed。也许您需要向.cols2 > *:nth-child(2n)添加填充以避免图像和文本之间的布局冲突。

在多列布局中浮动右侧列顶部的图像？

1 个答案: