两个div平分左右的布局样式怎么写

要使两个div平分左右布局，可以使用CSS的Flexbox布局。以下是实现这种布局的样式代码：




<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex; /* 使用Flexbox布局 */
}
 
.div1, .div2 {
  flex: 1; /* 两个div平分容器宽度 */
  padding: 10px; /* 内边距 */
  border: 1px solid #000; /* 边框，仅为了可视化 */
}
</style>
</head>
<body>
 
<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>
 
</body>
</html>

在这个例子中，.container 是一个flex容器，.div1 和 .div2 是需要平分宽度的两个div。通过设置flex: 1;，每个div都会平均分配容器的宽度。

两个div平分左右的布局样式怎么写

评论已关闭

推荐阅读