我试图根据设备宽度设置两种不同的布局,所以我更喜欢两者都有相同的
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 class="div1">div1</div>
<div class="div2a">div2a - Title.</div>
<div class="div2b">div2b - Description.</div>
<br />
<h2>On Mobile</h2>
<div class="div3">div3</div>
<div class="div4a">div4a - Title.</div>
<div class="div4b">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 class="div1">div1</div> <div class="div2a">div2a - Title.</div> <div class="div2b">div2b - Description.</div> <br /> <h2>On Mobile</h2> <div class="div3">div3</div> <div class="div4a">div4a - Title.</div> <div class="div4b">div4b - Description.</div>
