在这两个设备上,我将有一个图像(由绿色框表示)始终位于屏幕的左上角.就在它旁边,标题div也总是在同一个地方.
最有问题的div是描述div.如果它在桌面上,则该div应该与标题对齐,但如果它在移动设备上,它应该自己坐在图片下面.
下面的图像是使用float生成的,但是使用float也不理想,因为如果描述div足够长,它最终将流向左边(在桌面上),这不是所需的外观.在桌面上,它应该始终是两个清晰的列,描述不应该最终在图像div下面流动.
我很欣赏有关如何使用flexBox执行此 *** 作的任何指导,谢谢！
作为参考,这是我对float的尝试(注意我不想使用float)：
<!DOCTYPE HTML><HTML><head><style>.div1 { float: left; wIDth: 100px; height: 50px; margin: 10px; border: 3px solID #73AD21;}.div2a { border: 1px solID blue;}.div2b { border: 1px solID red;}.div3 { float: left; wIDth: 100px; height: 50px; margin: 10px; border: 3px solID #73AD21;}.div4a { border: 1px solID blue;}.div4b { border: 1px solID red; clear: left;}</style></head><body><h2>On Desktop</h2><div >div1</div><div >div2a - Title.</div><div >div2b - Description.</div><br /><h2>On Mobile</h2><div >div3</div><div >div4a - Title.</div><div >div4b - Description.</div></body></HTML>解决方法 这将是一种可能的解决方案.请注意,您已在CSS代码中提供了图像的尺寸(绿色框).我基于此代码. 这是Jsfiddle：
.div1 { position: absolute; wIDth: 100px; height: 50px; margin: 10px; border: 3px solID #73AD21;}.div2a { border: 1px solID blue; padding-left: 120px;}.div2b { border: 1px solID red; padding-left: 120px;}.div3 { position: absolute; wIDth: 100px; height: 50px; margin: 10px; border: 3px solID #73AD21;}.div4a { border: 1px solID blue; padding-left: 120px;}.div4b { margin-top:50px; border: 1px solID red;} <h2>On Desktop</h2><div >div1</div><div >div2a - Title.</div><div >div2b - Description.</div><br /><h2>On Mobile</h2><div >div3</div><div >div4a - Title.</div><div >div4b - Description.</div>总结
以上是内存溢出为你收集整理的html – 如何使用flexbox根据设备宽度重新流动div？全部内容，希望文章能够帮你解决html – 如何使用flexbox根据设备宽度重新流动div？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）