html - 我如何对齐这样的框
问题描述
我正在尝试对齐 3 个框和 2 个图像。
垂直2个盒子,中间有一个img
站在他们右边的第三个盒子有一个箭头 img 指向它,如下所示:
示例框 css:
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
解决方案
在div内使用flexbox
并划分为 3 个部分(3div
秒)wrap
.wrap{
display:flex;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
.img1 img{
width: 80px;
height: 150px;
}
.part2 img{
width: 150px;
height: 80px;
}
.part2,.part3{
margin-top: 100px;
}
.part3 .box{
margin-left: 40px;
}
<div class="wrap">
<div class="part1">
<div class="box">
</div>
<div class="img1">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="box">
</div>
</div>
<div class="part2">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="part3">
<div class="box">
</div>
</div>
</div>
推荐阅读
- spring-boot - Spring Cloud Stream 2.0 和 startOffset 最新
- weather - aeris 天气框架中的温度模块
- use-case - 用例 Plantuml - 垂直堆叠组件
- typescript - 如何在打字稿中使用带有矩阵参数的svg.js转换?
- javascript - 居中画布将其移动到角落
- excel - 尝试注册 UDF 的描述后出现“内存不足”VBA 错误
- java - Maven 项目迁移 STS v4
- virtualenv - julia virtualenv 请求不存在的 os 包
- genetic-programming - 执行遗传编程树
- asp.net-mvc - 如何使用管理员视图更新价格?我的费率随着时间的推移而变化。我如何允许管理员更新它们并相应地显示给用户?