如何解决在小分辨率下,一个div覆盖另一个flex
我有这个代码
.div1{
width:100%;
}
.div2{
width:100%;
}
.div3{
width:100%;
}
.div4{
width:100%;
}
@media(max-width:800px){
.div1,.div2,.div3,.div4{
width:100%;
height:100%;
}
.flexyy{
display:flex;
flex-direction:row;
flex: 1;
flex-wrap:wrap;
}
}
<div class='flexyy'>
<div class='div1'>....</div>
<div class='div2'>....</div>
<div class='div3'>....</div>
<div class='div4'>....</div>
</div>
当我将浏览器的大小调整到800px以下时。 div2上的div3覆盖,我不希望这样。 我希望每个div具有100%的宽度 请帮忙,抱歉我的英语不好 预先感谢
解决方法
添加box-sizing:border-box;可能会对您有帮助
* {
box-sizing:border-box;
}
.div{
width: 100%;
border: 1px solid black;
padding:5px;
}
.flexyy{
display: flex;
flex-direction: column;
flex: 1;
text-align: justify;
}
@media(max-width:800px){
.flexyy{
flex-direction: row;
flex-wrap: nowrap;
}
}
<div class='flexyy'>
<div class='div'>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
</div>
<div class='div'>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
</div> <div class='div'>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
</div> <div class='div'>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
</div>
</div
,
使用CSS网格+分数单位(fr)
重构代码:
HTML
<div class='flexyy'>
<div>....</div>
<div>....</div>
<div>....</div>
<div>....</div>
</div>
CSS
.flexyy {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。