要使两个div
具有相同的高度,其中一个保持正方形纵横比,可以使用CSS的一些高级技巧来实现。以下是一个解决方案:
<div class="container">
<div class="square"></div>
<div class="content">
<!-- 这里可以放置你的内容 -->
</div>
</div>
.container {
display: flex;
align-items: stretch; /* 使子元素高度相同 */
}
.square {
width: 50%; /* 设置宽度为50% */
padding-bottom: 50%; /* 设置padding-bottom为50%,保持正方形纵横比 */
background-color: red; /* 设置背景颜色以便观察效果 */
position: relative;
}
.content {
width: 50%; /* 设置宽度为50% */
background-color: blue; /* 设置背景颜色以便观察效果 */
}
.container
):使用display: flex
和align-items: stretch
来确保子元素的高度相同。.square
):通过设置width
和padding-bottom
为相同的百分比(例如50%),可以保持正方形的纵横比。padding-bottom
的百分比是相对于包含块的宽度计算的。.content
):设置宽度为50%,并确保其高度与正方形相同。这种布局常用于需要在一个容器内展示正方形和普通内容的场景,例如图片展示、仪表盘设计等。
通过这种方式,你可以轻松地实现两个div
具有相同的高度,并且其中一个保持正方形的纵横比。
领取专属 10元无门槛券
手把手带您无忧上云