电脑pc端位于父级元素的多标题+1图片布局banner
效果图
<style>
.hq-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background-color: #f26f03;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.bottom-bar div {
width: calc(25% - 20px); /* 每个子div占25%，减去间距 */
margin: 0 10px; /* 间距为相对值 */
text-align: center;
padding: 10px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.bottom-bar img {
width: 100%;
height: auto;
max-width: 100%;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 手机媒体查询 */
@media only screen and (max-width: 1023px) {
/* 在屏幕宽度小于等于x时应用以下样式 */
}
</style>
<div class="hq-bottom"><div style="font-size: 5em;color: #ffffff;margin: 0 -20px;">GPSI</div>
<div style="color: #ffffff;margin-left: -12vw;font-size: 20px;">xxxx预制系统内饰</div>
<div style="color: #ffffff;font-size: 5em;margin-left: -13vw;">丨</div>
<div style="color: #ffffff;font-size: 20px;margin-left: -13vw;">xxxx装配式系统内装一体化解决方案</div>
<div>
<img src="" alt="图片样式的Div">
</div></div>