时间戳

首页 > 解决方案 > 带网格的联系页面？

html - 带网格的联系页面？

问题描述

嘿，伙计们，我正在制作一个网站，并希望制作与此完全一样的联系页面： 我的联系人

有什么办法可以用网格制作吗？或者也许 flex-box 更好？

我使用了网格，但它看起来确实很乱，而且我不能让边框贴在中间。

标签： htmlcss

解决方案

使用flexbox和设置flex: 0 1 50%;

body,html{
height:100%;
width:100%;
margin:0;
padding:0;
}
.wrap{
    display: flex;
    flex-wrap: wrap;
}
.wrap div{
    flex: 0 1 49%;
    height:49vh;
    text-align: center;
}
.wrap div:nth-of-type(n+4),.wrap div:nth-of-type(n+3)
{
    border-top:1px solid grey;
}
.wrap div:nth-of-type(odd)
{
    border-right:1px solid grey;
}
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

推荐阅读