请写一段python 代码,让三个div 块并排对齐,三个div 块间的间隔相等
时间: 2024-09-12 09:07:39 浏览: 43
在python中利用pycharm自定义代码块教程(三步搞定)
你可以使用CSS的`display: flex`属性来实现这个需求。下面是一个简单的HTML和CSS示例,展示了如何创建并排排列、间隔相等的三个div块:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: space-between; /* 平行分布,并留出间隔 */
padding: 0 20px; /* 父元素添加间距 */
}
.div-block {
width: 30%; /* 保证每个div占据固定百分比宽度 */
border: 1px solid black; /* 可视化div边界 */
margin-bottom: 10px; /* 防止div堆叠 */
}
</style>
</head>
<body>
<div class="container">
<div class="div-block">Div 1</div>
<div class="div-block">Div 2</div>
<div class="div-block">Div 3</div>
</div>
</body>
</html>
```
在这个例子中,`.container`设置了`display: flex`使其变为弹性容器,`justify-content: space-between`使得子元素间均匀分布。`.div-block`则占用了总宽度的30%,并有边框和底部间距。
阅读全文