html/css 列都改变了大小，但我只想要一个

Question

我在想是否有一种方法可以让我的小代码想法看起来更好，方法是仅更改悬停列的大小，以便第二个悬停时底部不会有空 space第一个？

有什么想法/解决方案吗？谢谢

.Row {
  display: table;
  width: 95%;
  margin: auto;
  table-layout: fixed;
  border-spacing: 10px;
}

.appear_on_hover {
  display: none;
  transition-duration: .5s;
}

.Column:hover .appear_on_hover {
  display: block;
  transition-duration: .5s;
}

.Column {
  background: #ddd; 
  display: table-cell;
  text-align: center;
  transition-duration: .5s;
}

.Column:hover {
  transform: scale(1.2);
  transition-duration: .5s;
}

<div class="Row">
  <div class="Column">
    <h4>
      <br>
      <b>col 1</b>
      <br> some text
      <div class="appear_on_hover">
        test l1 <br> test l2 <br> test l3
      </div>
    </h4>
  </div>

  <div class="Column">
    <h4>
      <br>
      <b>col 2</b>
      <br> some text
    </h4>
  </div>
</div>

不要注意文字，只要一些法语的东西，我有这个：

并且想要这样的东西：

Answer 1

如果可能，我建议使用 display: flex 而不是 table。有各种 flex-properties，例如 justify-content、align-items 和 flex-grow，可以帮助确保 grid-like 布局中的项目在每一行中的大小相同。由于文本内容和文本行的数量不同，它们目前的高度不同。

Answer 2

将您的 .Column-appear 设置为 position: absolute; 并使用 transform: translateY() 和 opacity 以及 visibility 而不是 display
不要在<h4>里面使用<div>，而是用单独的DIV来区分.Column-content和.column-appear

* {margin:0; box-sizing: border-box;}

.Row {
  display: flex;               /* change this */
  margin: auto;
  padding: 10px;
  /* table-layout: fixed;      /* Remove this */
  /* border-spacing: 10px;     /* Remove this */
}

.Column {
  position: relative;          /* add this */
  flex: 1;                     /* add this */
  transition: .5s;
  margin: 0 10px; /* add this for some spacing */
  filter: drop-shadow(0 0 0 2px #4444dd);
}

.Column-content,               /* New DIV in HTML! */
.Column-appear{                /* new! */
  background: #aaa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
}

.Column-appear {                /* Use a better className */
  /* display: none;             /* remove this */
  visibility: hidden;           /* add this */
  opacity: 0;                   /* add this */
  position: absolute;           /* add this */
  width: 100%;                  /* add this */
  border-top: none;             /* add this */
  border-radius: 0 0 10px 10px; /* add this */
  transform: translateY(-30%) ; /* add this */
  transition-duration: .5s;
}

.Column:hover {
  transform: scale(1.1);
  z-index: 1;                   /* add this */
  /* transition: .5s;           /* Remove this */
}

.Column:hover .Column-appear {
  visibility: visible;          /* add this */
  opacity: 1;                   /* add this */
  transform: translateY(-20px); /* add this */
  /* transition: .5s;           /* Remove this */
}

<div class="Row">
  <div class="Column">
    <div class="Column-content">
      <h4>col 1<br>some text 1</h4>
    </div>
    <div class="Column-appear">
      test l1<br> test l2<br> test l3
    </div>
  </div>

  <div class="Column">
    <div class="Column-content">
      <h4>col 2<br>some text</h4>
    </div>
    <div class="Column-appear">
      test l2
    </div>
  </div>
</div>

<div class="Row">
  <div class="Column">
    <div class="Column-content">
      <h4>col 1<br>some text 2</h4>
    </div>
  </div>
  <div class="Column">
    <div class="Column-content">
      <h4>col 2<br>some text</h4>
    </div>
    <div class="Column-appear">
      test l1<br> test l2<br> test l3
    </div>
  </div>
</div>

html/css 列都改变了大小，但我只想要一个

html/css columns all change size but I only want one to

html

css

multiple-columns