左边有空格 左边中间包含空格 随机生成背景颜色 右边三个空格 第一个跟第三个一样的大小 中间这个大一点 然后对齐 所有的空格都对齐
时间: 2024-09-13 21:09:18 浏览: 25
为了实现您描述的效果,我们可以使用HTML和CSS结合一些随机生成颜色的技巧。这是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: center; /* 主轴居中 */
}
.box {
display: flex;
align-items: center; /* 跨轴居中 */
gap: 5px; /* 宽度间隔 */
}
.box span {
background-color: var(--random-bg-color); /* 使用 CSS 自定义属性来随机生成颜色 */
padding: 0 5px; /* 边距 */
}
.left-side {
width: calc(33% - 10px); /* 左侧宽度减去两边的空白 */
}
.middle-box {
flex-grow: 2; /* 中间的盒子放大占空间 */
width: calc(67% - 10px);
}
.right-side {
width: calc(33% - 10px); /* 同左,右两边一致 */
}
</style>
<script>
document.documentElement.style.setProperty('--random-bg-color', `#${Math.floor(Math.random() * 16777215).toString(16)}`);
</script>
</head>
<body>
<div class="container">
<div class="left-side">
<span></span>
</div>
<div class="middle-box">
<span></span>
</div>
<div class="right-side">
<span></span>
</div>
</div>
</body>
</html>
```
在这个例子中,我们创建了一个包含三个`<span>`元素的容器,每个元素都有相同的结构但不同的背景颜色。通过CSS的`calc()`函数计算了左右两侧的固定宽度,并使用`flex-grow`属性控制中间盒子占据更多的空间。同时设置了`justify-content`和`align-items`属性让所有内容在屏幕中心对齐。
至于颜色,我们在CSS中使用自定义属性`--random-bg-color`并用JavaScript动态设置,每次页面加载时都会生成一个随机的十六进制颜色值。