html - 使垂直对齐的父 block 随着 child 的成长向右生长的最简单方法是什么？

Question

我想要实现的是这样的:

.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>

Answer 1

使用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>