当前位置：首页 > news >正文

html 几行的空间分成3个区域

news 2024/9/22 11:59:05

1.代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>三个区域示例</title>  
<style>  /* 设置整体容器样式 */  .container {  display: flex; /* 使用Flexbox布局 */  justify-content: space-between; /* 子元素之间的间隔相等 */  width: 100%; /* 容器宽度占满整个屏幕 */  }  /* 设置每个区域的样式 */  .region {  flex: 1; /* 每个区域都等宽 */  height: 200px; /* 你可以根据需要调整高度 */  background-color: #f0f0f0; /* 设置背景色以区分区域，实际使用时可以去除或修改 */  margin: 10px; /* 设置外边距，增加区域之间的间隔 */  padding: 20px; /* 设置内边距，增加区域内部的空间 */  box-sizing: border-box; /* 使得宽度和高度包括内边距和外边距 */  text-align: center; /* 文本居中显示 */  }  
</style>  
</head>  
<body>  <div class="container">  <div class="region">区域 1</div>  <div class="region">区域 2</div>  <div class="region">区域 3</div>  
</div>  </body>  
</html>