代码之家 › 专栏 › 技术社区 › Hews

动态定位div,使其位于容器的右下角或下方,具体取决于帧宽度

css html php

Hews · 技术社区 · 5 年前

我有以下网页设计。我正在尝试调整它,使设计相应地适用于移动设备。这就是它目前的设置方式,以及我希望它针对移动设备的更改方式:

文本/图像的定位非常重要。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
}