CSS中定义三个的布局是非常常见的,而且也是布局基础。下面是一种常见的实现方式:<style> .wrapper{ width: 80%; margin: 0 auto;
CSS中定义三个
的布局是非常常见的,而且也是布局基础。下面是一种常见的实现方式:<style> .wrapper{ width: 80%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .box{ width: 30%; height: 200px; background-color: #ccc; } </style> <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
上面的代码中,我们使用了一个包含三个
的父级元素.wrapper,并在其中设置了display: flex;来实现水平排列,并且设置了justify-content: space-between;来实现平均间距排列。同时也设置了align-items: center;来使这三个元素垂直居中。同时,每个里面的.box元素也设置了宽度为30%,高度为200px,并设置了一个背景颜色,这样就得到了三个宽度为30%的块状元素。
上面的实现方法非常简单,同时也是我们学习CSS布局的基础之一,值得进行深入研究。
粉丝
0
关注
0
收藏
0