我是 CSS/HTML 自动学习者,如果我的问题很愚蠢,我深表歉意。
我想要一个最小宽度为 40% 且内容合理的 div,但是当更多元素将添加到此 div 中时,它的宽度会相应增加。
这是我目前所拥有的:
.hcontainerbutton {
display: flex;
width: 40%;
background-color: blue;
align-items: center;
justify-content: space-around;
right: 30%;
left: 30%;
position: absolute;
bottom: 0!important;
}
width:40%
或 min-width:40%
如果我向其中添加更多元素,div 不会增长
最佳答案
将
.hcontainerbutton
包裹在一个容器中,并对其应用flexbox
和height
属性。这可用于定位.hcontainerbutton
而不是position: absolute
。将
min-width
值添加到.hcontainerbutton
您可以通过添加和删除 .content
div 并全屏查看来测试此布局。
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.hcontainerbutton {
min-width: 40%;
background-color: blue;
display: flex;
justify-content: space-around;
margin-top: auto;
}
.content {
background: pink;
width: 100px;
height: 100px;
}
<div class="container">
<div class="hcontainerbutton">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
关于html - 最小宽度随内容增长的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46745015/