html/css列都改變大小，但我只想要一個

如果有一種方法可以通過僅更改懸停列的大小使第二個在懸停第一個時在底部沒有一些空白空間來使我的小代碼想法看起來更好，我正在徘徊？

有什么想法/解決方案嗎？謝謝

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

不要注意文字，只是一些法語的東西，我有這個：

并想要這樣的東西：

uj5u.com熱心網友回復：

• 設定你的.Column-appearas并使用它的和而不是position: absolute;懸停播放transform: translateY()opacityvisibilitydisplay
• 不要使用<div>inside <h4>，而是使用單獨的 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>

uj5u.com熱心網友回復：

如果可能的話，我建議使用display: flex而不是表格。有多種 flex-properties，例如justify-content, align-items, flex-grow，可以幫助確保網格狀布局中的專案在每一行中的大小相同。由于文本內容和文本行的數量不同，它們目前的高度不同。

uj5u.com熱心網友回復：

使用 css flexbox，

parent{
display: flexbox;
flex-direction: column;
justify-content: center;

etc....}

CSS

child {
 align-self: self-start;
 }
child:hover{ height:auto etc...}

標籤：html css 多列

上一篇：如何使用css選擇嵌套div中的最后一項？

下一篇：相鄰div的孩子需要垂直水平