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>

我能够使父母随着孩子的成长而成长的关键是对父母使用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>

但是这样做总是让我父母之间无法消除。有没有一种方法可以删除包装器，使结构更简单（如第一个示例所示）：

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

Answer 2

使用包装器将所有父母包裹起来，然后使用flexbox。

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.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 class="parent">
      <div class="child"></div>
  </div>
  <div class="parent">
      <div class="child"></div>
  </div>
</div>

Answer 3

在font-size:0处为内联元素父项添加.wrapper将消除差距！

使垂直对齐的父块随着孩子的成长向右生长的最简单方法是什么？

3 个答案: