html – 如何使用flexbox根据设备宽度重新流动div?

html – 如何使用flexbox根据设备宽度重新流动div?,第1张

概述我试图根据设备宽度设置两种不同的布局,所以我更喜欢两者都有相同的 HTML布局,只需在CSS中使用媒体查询. 在这两个设备上,我将有一个图像(由绿色框表示)始终位于屏幕的左上角.就在它旁边,标题div也总是在同一个地方. 最有问题的div是描述div.如果它在桌面上,则该div应该与标题对齐,但如果它在移动设备上,它应该自己坐在图片下面. 下面的图像是使用float生成的,但是使用float也不理 我试图根据设备宽度设置两种不同的布局,所以我更喜欢两者都有相同的 HTML布局,只需在CSS中使用媒体查询.

在这两个设备上,我将有一个图像(由绿色框表示)始终位于屏幕的左上角.就在它旁边,标题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?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1143909.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存