如何在父元素中放置多个 HTML 子元素？[复制]
发布于2023-03-24 16:21 阅读(552) 评论(0) 点赞(20) 收藏(4)
How can I fit the 2 child elements (blue border) to fit perfectly within the parent (black border) without having to adjust the height?
My code:
<html>
<head>
<style>
.parent {
border: 3px solid black;
height: 500px;
}
.child {
border: 3px solid blue;
height: 50%;
margin: 2% 1%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>解决方案
你可以像这样使用display: flex和flex-direction设置它：
.parent {
border: 3px solid black;
height: 500px;
display: flex;
flex-direction: column;
}
.child {
border: 3px solid blue;
height: 50%;
margin: 2% 1%;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/516814/43f3cffcfcf156b2c58e/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力