css实现多列布局，中间用样式相隔

编程知识更新时间:2023-04-06 07:56:59

1，使用column布局：
效果图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>column布局</title> 
<style> 
.newspaper
{
	column-count:3;
	column-gap:40px;
	column-rule:1px solid #999;
}
.newspaper div{
	text-align:center;	
}
</style>
</head>
<body>
<div class="newspaper">
	<div>111</div>
	<div>222</div>
	<div>333</div>
</div>
</body>
</html>

2，使用grid布局：
效果图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>grid布局</title> 
<style> 
.newspaper
{
	display:grid; 
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows: auto;
}
.inline-div{
	position: relative;
	text-align:center;
}
.inline-div:not(:last-child):after {
  border-right: 1px dashed #A8A8A8;
  content: " ";
  height: 100%;
  width: 1px;
  right: 0px;
  position: absolute;
}
</style>
</head>
<body>
<div class="newspaper">
	<div class="inline-div">111</div>
	<div class="inline-div">222</div>
	<div class="inline-div">333</div>
</div>
</body>
</html>```