Html 多列布局中右列顶部的浮动图像?

Html 多列布局中右列顶部的浮动图像?,html,css,Html,Css,我很难找到解决这个问题的办法,我很惊讶其他人没有在这里或其他地方提出同样的问题 假设我有一个两列布局,使用: columns:100px 2; -webkit-columns:100px 2; -moz-columns:100px 2; 这些列在浏览器窗口调整大小时是流动的,所以我的问题很简单,如何将图像固定在右列的顶部 谢谢 编辑: 根据下面Flixer的建议,我现在使用的代码就是这个,但不幸的是,结果是图像像内联元素一样出现在第一列中。理想的结果是图像出现在第二列的固定位置,周围有文字环绕

我很难找到解决这个问题的办法,我很惊讶其他人没有在这里或其他地方提出同样的问题

假设我有一个两列布局,使用:

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>

.cols2{
色谱柱:350px2;
-webkit柱:350px 2;
-moz柱:350px2;
}
.cols2>*:第n个子(2n)img{
位置:固定;
填充物:5px;
}
Lorem ipsum dolor sit amet,是一位杰出的献身者。艾蒂安·特里斯蒂克·乌尔纳·尼西
最后,我要告诉你。不,不,不,不,不,不
托托·阿迪皮斯库苏斯。国际社会和国际社会在第一次同侧会前就享有盛名
福西布斯。

Lorem ipsum dolor sit amet,是一位杰出的献身者。艾蒂安·特里斯蒂克·乌尔纳·尼西 最后,我要告诉你。不,不,不,不,不,不 托托·阿迪皮斯库苏斯。国际社会和国际社会在第一次同侧会前就享有盛名 faucibus.
。艾蒂安·特里斯蒂克·乌尔纳·尼西 最后,我要告诉你。不,不,不,不,不,不 托托·阿迪皮斯库苏斯。国际社会和国际社会在第一次同侧会前就享有盛名 faucibus.
。艾蒂安·特里斯蒂克·乌尔纳·尼西 最后,我要告诉你。不,不,不,不,不,不 托托·阿迪皮斯库苏斯。国际社会和国际社会在第一次同侧会前就享有盛名 faucibus.
。艾蒂安·特里斯蒂克·乌尔纳·尼西 最后,我要告诉你。不,不,不,不,不,不 托托·阿迪皮斯库苏斯。国际社会和国际社会在第一次同侧会前就享有盛名 福西布斯。

我建议:

.cols2 {
    columns:80px 2;
    -webkit-columns:80px 2;
    -moz-columns:80px 2;
}
.cols2 > *:nth-child(2n) img {
    position:fixed;
}
这将选择.cols2类元素中第二个子元素的图像(您也可以编写
.cols2>*:n个子(偶数)img
,如果您更直观的话),并将其位置设置为固定。也许您需要在
.cols2>*:n子(2n)
中添加一个填充,以避免图像和文本之间的布局冲突