帮我写一个微信小程序一个大框架里面有三个框 三个框架在同一行第一个框是80*80的另外俩个框是一样大的间距为2
时间: 2024-11-29 20:32:44 浏览: 57
要在微信小程序中创建一个包含三个大小各异的框,并保持它们在同一行显示,你可以使用 Flexbox 布局。这里是一个简单的示例代码片段,用于描述页面的结构和样式:
```html
<view class="container">
<view class="box box-1" style="width: 80px; height: 80px;"></view>
<view class="box box-2" style="flex: 1;"></view>
<view class="box box-3" style="flex: 1;"></view>
</view>
<style scoped>
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: #f00; /* 你可以自定义颜色 */
margin-right: 2px; /* 给每个框之间设置间距 */
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* 如果需要盒子宽度相等,可以去掉 box-2 和 box-3 的 width 以及 container 中的 justify-content */
.box-2, .box-3 {
/* width: auto; 或者 delete 这一行 */
}
</style>
```
这个例子中,`.container` 使用了 Flexbox 的 `display: flex` 属性使其成为弹性容器。`.box-1` 宽度固定为80像素,而 `.box-2` 和 `.box-3` 则通过 `flex: 1` 实现占据剩余空间,它们之间的间距由 `.container` 中的 `justify-content: space-between` 控制。
如果你想让 `.box-2` 和 `.box-3` 的宽度相等,可以直接删除这两行 `width: 100%;` 或者注释掉,然后调整其他布局属性。
阅读全文
相关推荐
















