我正在处理这个页脚,它往往不按照我想要的方式工作。基本上,现在的问题是,一旦我从桌面转到较小的移动设备,我制作了两个图像,目前将留下来。所以就像这个>
桌面第1行 - 左图,中心图像 - 右图第2行 - 集中文本。
,但是当我去手机时,我想要(!!)变成这样的第1行/中心imgae第2行/集中式文本
但是,当它变小时,它都会被融合在一起,因此文本与中心图像重叠。我可能会隐藏它,但是如果可以放下它,那就太好了。这是我正在使用的代码。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: #5C6568;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 5px;
margin-left: 0px;
margin-right: 0px;
text-align: center;
line-height: 25px;
font-size: 30px;
background:#5C6568;
}
.flex-container2 > div {
background-color: #f1f1f1;
margin: 5px;
color: white;
margin-left: 0px;
text-align: center;
line-height: 75px;
font-size: 15px;
font-family: Cardo;
background:#5C6568;
}
footer #footer-riba {
left: 7cm;
}
footer #footer-intbau {
right: 7cm;
}
@media only screen and (max-width:768px){
#footer-riba, #footer-intbau, #pinkriba, #footer-mega-col-wrap, #flex-container2 {
display: none;
}}
</style>
</head>
<body>
<div class="flex-container">
<div><img id="footer-riba" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/INTBAU-v3-same-size-as-RIBA-01-300x79.png"></div>
<div> <center><img id="greylogo" src="https://test3.rental-academy.com/wp-content/uploads/2019/03/John-Simpson-Architects-Logo-Transparenthalf-01.png"></center></div>
<div><img id="footer-intbau" src="https://test3.rental-academy.com/wp-content/uploads/2019/01/ribaWhite2-300x79.png"></div>
</div>
<div class="flex-container2">
<div>JOHN SIMPSON ARCHITECTS LTD. | 29 Great James St, London WC1N 3ES, UK | +44 20 7 405 1285 | info@johnsimpsonarchitects.com | <a href="https://www.linkedin.com/company/john-simpson-architects-london-limited" style="color: white">linkedin</a></div>
</div>
</body>
</html>
<footer>
</footer>
我注意到了为什么!因此,在我使用中心命令(中心PNG)将其集中到它之前,但是在删除周围的人并使用flex之后,那些不需要。删除这些使其正常工作!