我有以下网页设计。我正在尝试调整它,使设计相应地适用于移动设备。这就是它目前的设置方式,以及我希望它针对移动设备的更改方式:
文本/图像的定位非常重要。ImgA位于ContainerA的TextA中心上方。TextB居中于ImgB之上,ImgB也居中。然而,TextC位于ImgC左上方。
不幸的是,我不能让容器C(TextC+ImgC)进入我想要的位置。此时,它要么浮在右上角,要么与容器B(TextB+ImgB)重叠。
任何帮助都将不胜感激:)
这是我的HTML:
<div class='app_general'>
<div class='general_order'>
<img class ='general_order_image' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./stylesheets/assets/iphoneGeneralOrder.jpg" />
<div class='general_order_title'>
TextA.
</div>
</div>
<div class='general_filter'>
<div class='general_filter_title'>
TextB
</div>
<img class ='general_filter_image' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./stylesheets/assets/iphoneGeneralFilter.jpg" />
</div>
<div class='general_bookings'>
<div class='general_booking_content'>
<div class='general_booking_title'>
TextC
</div>
<img class ='general_booking_image' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="./stylesheets/assets/iphoneGeneralBooking.jpg" />
</div>
</div>
</div>
这里是CSS:
.app_general {
width: 100%;
height: auto;
overflow:auto;
background-color: #fff;
position: relative;
}
.general_filter,
.general_order {
float: left;
}
.general_bookings{
float: right;
position: relative;
right: 0px;
bottom: 0px;
}
.early_access {
padding-top: 100px;
font-size: 30px;
text-align: center
}
.find_allergens_table,
.find_allergens_text,
.ingredient_text {
text-align: left;
font-size: 40px
}
.general_filter {
padding-left: 40px;
height: 100%;
background-color: white;
}
.general_order {
height: 100%;
background-color: white;
padding-left: 30px;
}
.general_filter_title {
width: max-content;
padding-top: 40px;
padding-bottom: 25px;
padding-left: 15px;
font-size: 40px;
color: #757474
}
.general_filter_image {
margin-left: -30px;
padding-left: 15px;
height: 600px;
float: left
}
.general_order_image {
height: 375px;
padding-left: 30px;
padding-right: 120px;
}
.general_order_title {
color: #757474;
font-size: 40px;
margin-top: 30px;
margin-left: 35px;
}
.general_booking_title {
width: 100%;
font-size: 40px;
color: #757474;
float: left
}
.general_booking_image {
height: 446px;
float: right
}