我想要实现的是这样的:
.parent {
min-width: 64px;
width: auto;
height: 64px;
background-color: purple;
display: inline-block;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
我能够让 parent 随着 child 的成长而成长的关键是使用 display: inline-block
对于父级,但要使它们垂直对齐,我必须为每个父级使用一个额外的包装器,或者放置一个 <br>
在每个家长像这样之后:
<div class="parent">
<div class="child"></div>
</div><br>
<div class="parent">
<div class="child"></div>
</div><br>
<div class="parent">
<div class="child"></div>
</div><br>
但在这样做的过程中, parent 之间总是存在我无法消除的微小差距。有没有一种方法可以删除包装器以使结构像这样更简单地工作(与第一个示例具有相同的效果):
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
最佳答案
使用float
并在每个元素后清除:
.parent {
min-width: 64px;
height: 64px;
background-color: purple;
float:left;
clear:left;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
或者在宽度中使用min-content
。只需关注支持:https://caniuse.com/#feat=intrinsic-width
.parent {
min-width: 64px;
height: 64px;
background-color: purple;
width:min-content;
}
.child {
width: 24px;
height: 24px;
background-color: yellow;
transition: all 0.5s ease;
}
.child:hover {
width: 256px;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
关于html - 使垂直对齐的父 block 随着 child 的成长向右生长的最简单方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56889582/