我的div类信息容器在移动设备上的位置似乎不正确。代码似乎还可以,所以不确定是什么问题。我只希望类信息容器仅在移动设备中的徽标下方。但是,该代码似乎并未发挥作用。 我是html / css
的新手
.topSection {
display: flex;
justify-content: space-between;
}
.info-container {
display: flex;
flex-direction: column;
}
.info {
display: flex;
align-items: center;
}
.info img {
margin-right: 8px;
}
@media only screen and (max-width: 600px) {
.info-container {
position: relative;
top:12px;
left:5px;
}
}
<div class="topSection">
<div class="logo">
<a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img
src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png"
alt="Logo"></a>
</div>
<div class="info-container">
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
<a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
</div><br>
<div class="info">
<a href="https://www.google.co.uk/maps/dir/''/elegant+curtains+and+blinds/@53.6967136,-1.7011525,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x487960059226814f:0x337f355d1975d87c!2m2!1d-1.631113!2d53.696734" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;"></a>
<p style="color:#2B8C1A">Visit Our Showroom</p>
</div><br>
<div class="info">
<a href="https://youtu.be/DAasK7kF2DQ" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank""></a>
<p style="color:#2B8C1A">Watch Our Video</p>
</div>
</div>
</div>
答案 0 :(得分:1)
在媒体查询中添加此CSS
@media only screen and (max-width: 600px){
.topSection {
display: unset;
}
}
答案 1 :(得分:0)
将display:block;
添加到移动设备的父类
http://prntscr.com/kdq5tq
答案 2 :(得分:0)
由于flex属性,它无法正确显示,请尝试在css下方添加。
@media only screen and (max-width: 600px) {
.topSection {
display:block;
}
}
答案 3 :(得分:0)
console.log (#ENV{localisation, #GET{coord}})
请检查此代码是否有效。
答案 4 :(得分:0)
在css代码下方添加移动版式
@media only screen and (max-width: 600px){
.topSection {
display: block;
justify-content: space-between;
clear: both;
overflow: hidden;
}
.info-container {
position: relative;
top: -28px;
left: 0;
display: inline-block;
width: 100%;
float: left;
clear: both;
}
.info {
float: left;
width: 33%;
}
}