在我做的元素中,我希望用户能够上传图片。这些图片必须按照从首次上传到最后上传的顺序排列。
看看下面的代码:
body{
color:white;
}
#wrap{
margin-top:10px;
overflow:hidden;
}
#container{
background:#121212;
max-width:250px;
padding:5px;
overflow:hidden;
float:right;
padding:5px 5px 0 0;
}
.img_c{
height:50px;
overflow:hidden;
float:right;
margin:0 0 5px 5px;
}
.img_c img{
max-width:100%;
max-height:100%;
}
.l{
float:left; /*When I use this, images are displayed in the correct order*/
}
.r{
float:right; /*Wierd behavior!!*/
}
<div id="wrap">
<div id="container">
<p>Float:left</p>
<div class="img_c l">
<img src="https://i.postimg.cc/3NgXgXkD/0001.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/FRkgK5mp/0003.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/kGrN61gm/0004.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/VvcMLJKs/0005.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/FzgSfh6y/0006.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/MTBVS7br/0007.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/WpMgY74d/0008.jpg">
</div>
</div></div>
<div id="wrap">
<div id="container">
<p>Float:right</p>
<div class="img_c r">
<img src="https://i.postimg.cc/3NgXgXkD/0001.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/FRkgK5mp/0003.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/kGrN61gm/0004.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/VvcMLJKs/0005.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/FzgSfh6y/0006.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/MTBVS7br/0007.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/WpMgY74d/0008.jpg">
</div>
</div>
如您所见,当我将 #container
的内容 float 到左侧时,所有内容都是这样排序的:
[img0001] [img0002] [img0003] [img0004]
[img0005] [img0006] [img0007]
[img0008]
以正确的方式排列我的图像。耶!
但是当我使用 float:right
时,图像的每一 行 都是反转的,这意味着我不能只反转 DOM 中的图像列表。基本上,它给了我们以下结果:
[img0004] [img0003] [img0002] [img0001]
[img0007] [img0006] [img0005]
[img0008]
这是我所期望的:
[img0001] [img0002] [img0003] [img0004]
[img0005] [img0006] [img0007]
[img0008]
我该如何解决这个问题?
旁注:有人刚刚建议 Javascript 与该问题无关。问题是,如果没有纯 CSS 解决方案,我不会费心使用 Javascript 解决方案。
非常感谢。
最佳答案
为了避免“顺序困惑”而不是 float: right
使用 display: inline-block
和 text-align: right
.
我还将您重复的 ID 更改为类名。
body{
color:white;
}
.wrap{
margin-top:10px;
overflow:hidden;
}
.container{
float:right;
background:#121212;
max-width:250px;
padding:5px;
overflow:hidden;
padding:5px 5px 0 0;
}
.img_c{
height:50px;
overflow:hidden;
margin:0 0 5px 5px;
display: inline-block; /* here's the trick */
}
.img_c img{
max-width:100%;
max-height:100%;
}
.cl{
text-align:left;
}
.cr{
text-align:right; /*no more weird behavior!!*/
}
<div class="wrap cl">
<div class="container">
<p>Float:left</p>
<div class="img_c l">
<img src="https://i.postimg.cc/3NgXgXkD/0001.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/FRkgK5mp/0003.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/kGrN61gm/0004.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/VvcMLJKs/0005.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/FzgSfh6y/0006.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/MTBVS7br/0007.jpg">
</div>
<div class="img_c l">
<img src="https://i.postimg.cc/WpMgY74d/0008.jpg">
</div>
</div></div>
<div class="wrap cr">
<div class="container">
<p>Float:right</p>
<div class="img_c r">
<img src="https://i.postimg.cc/3NgXgXkD/0001.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/h4x1WB2P/0002.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/FRkgK5mp/0003.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/kGrN61gm/0004.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/VvcMLJKs/0005.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/FzgSfh6y/0006.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/MTBVS7br/0007.jpg">
</div>
<div class="img_c r">
<img src="https://i.postimg.cc/WpMgY74d/0008.jpg">
</div>
</div>
关于javascript - float : right is messing up the order,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57777030/