小程序
小游戏
企业微信
微信支付
扫描小程序码分享
布局的时候 想让左右2边一样高，而且每个块都成正方形。这种该怎样布局
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
flex 了解一下
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
flex，怎么控制2边高度一样呢。 右边是2个正方形 加边距的高度 = 左边大正方形高度
不晓得是不是你要的效果
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.square-p{
width: 49%;
.left{
background: blue;
.right{
background: green;
flex-direction: column;
text-align: center;
.line{
.square{
width:50%;
padding:3px;
.item{
width:100%;
padding:50% 0 50% 0;
.item1{
background: red;
.item2{
background: yellow;
.item3{
background: gray;
.item4{
background: pink;
</style>
</head>
<body>
<div class="container">
<div class="square-p left"></div>
<div class="square-p right">
<div class="line">
<div class="square ">
<div class="item1 item"></div>
</div>
<div class="square">
<div class="item2 item"></div>
<div class="item3 item"></div>
<div class="item4 item"></div>
</body>
就是这样的，谢谢了。赞赞赞~
首先全部左浮动，接着第一块的宽高和后面的方块宽高分别设置一下
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
flex 了解一下
flex，怎么控制2边高度一样呢。 右边是2个正方形 加边距的高度 = 左边大正方形高度
不晓得是不是你要的效果
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.square-p{
width: 49%;
}
.left{
background: blue;
}
.right{
background: green;
display: flex;
flex-direction: column;
text-align: center;
}
.line{
display: flex;
flex-direction: row;
}
.square{
width:50%;
padding:3px;
}
.item{
width:100%;
padding:50% 0 50% 0;
}
.item1{
background: red;
}
.item2{
background: yellow;
}
.item3{
background: gray;
}
.item4{
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="square-p left"></div>
<div class="square-p right">
<div class="line">
<div class="square ">
<div class="item1 item"></div>
</div>
<div class="square">
<div class="item2 item"></div>
</div>
</div>
<div class="line">
<div class="square ">
<div class="item3 item"></div>
</div>
<div class="square">
<div class="item4 item"></div>
</div>
</div>
</div>
</div>
</body>
就是这样的，谢谢了。赞赞赞~
首先全部左浮动，接着第一块的宽高和后面的方块宽高分别设置一下