目录
页面样式
html页面代码
scss样式代码
页面样式
这是布局完成之后的整个页面的布局，可以看到每行显示两个div
html页面代码
<div className='home'>
<div className='top'>
<h1>购物商城</h1>
</div>
<div className='center'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>在center大盒子中有8个div盒子，我们需要让他均匀的分布在页面
scss样式代码
.home{
width: 100vw;
height: 100vh;
background-color: lightblue;
.top{
width: 100vw;
height:60px;
background-color: lightgray;
h1{
text-align: center;
line-height: 60px;
}
}
.center{
width: 100vw;
height: calc(100vh - 60px);
background-color: lightcoral;
display: flex; //把盒子在一行显示
overflow-x: hidden; //超出隐藏
flex-wrap: wrap; //超出自动换行
div{
width: 48%;
height: 200px;
background-color: lightseagreen;
margin: 10px 5px 10px 5px;
}
}
}我们先是通过display：flex把所有的div整到一行中，overflow：hidden超出部分隐藏，flex-wrap:wrap超出自动换行文章来源：https://www.toymoban.com/news/detail-544380.html
margin属性四个值的先后顺序是：margin-top，margin-right，margin-buttom，margin-left文章来源地址https://www.toymoban.com/news/detail-544380.html
到了这里，关于css中div超出自动换行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
