Question

嘿大家我制作的div都是可以缓和的，并且有一定的宽度和高度。他们坐在一张桌子旁边，彼此相邻（4个div放在一个桌子中的td元素中）我遇到的问题是，每当我将鼠标悬停在另一个放在旁边的div上时打开它导致旁边的div变得更小（？）我甚至不确定发生了什么，但它只是导致它在td内收缩并且整个td扩展。我想知道是否有一种方法可以使td和div保持固定的大小（小而且不会导致td在它旁边的那个扩展时扩展。

例如，如果我将鼠标悬停在带有文本2的div上，那么带有文本1的那个将保持关闭状态（当你不悬停在任何东西上时它看起来如何

我只能使用css＆amp; html和我不能使用id-Important来说因为某些原因因为某些原因我正在编辑的网站由于某种原因而不能出现

事先感谢所有帮助者！

＆＃13;

.Scrollbox
        {
            background:rgba(237, 41, 57,0.6);
            width:300px;
            height:250px;
            border:1px solid #ffffff;
            overflow-y: scroll;
             position: relative;
             transition: height 1s ease;
            text-align: center;
            overflow: hidden;
            font-family: 'Poiret One', cursive; 
            
        }
        
        .Scrollbox:hover
        {
            height:500px;
            overflow-y: scroll;
        }

＆＃13;

<table><tr><td><div class="Scrollbox">1</div></td><td><div class="Scrollbox">2</div></td></tr>
<tr><td><div class="Scrollbox">3</div></td><td><div class="Scrollbox">4</div></td></tr>
</table>

＆＃13;

Answer 1

它不会越来越小，它正在向下移动。表行的默认垂直对齐方式是“中间”。我添加了一些CSS来保持表格行对齐。

.Scrollbox
        {
            background:rgba(237, 41, 57,0.6);
            width:300px;
            height:250px;
            border:1px solid #ffffff;
            overflow-y: scroll;
             position: relative;
             transition: height 1s ease;
            text-align: center;
            overflow: hidden;
            font-family: 'Poiret One', cursive; 
        }
        
        .Scrollbox:hover
        {
            height:500px;
            overflow-y: scroll;
        }

        tr {
            vertical-align:top;
        }

<table><tr><td><div class="Scrollbox">1</div></td><td><div class="Scrollbox">2</div></td></tr>
<tr><td><div class="Scrollbox">3</div></td><td><div class="Scrollbox">4</div></td></tr>
</table>

Answer 2

其他div正在关闭，因为所有.scrollbox都表现为表格单元格。如果您想使用flexbox，另一个简单的解决方案如下。我已编辑您的代码以使用flexbox。

 <div class="scroll-con">
  <div class="Scrollbox">1</div>
  <div class="Scrollbox">2</div>
  <div class="Scrollbox">3</div>
  <div class="Scrollbox">4</div>
</div>

.scroll-con {
  display: flex;
  flex-flow: row wrap;
}
.Scrollbox {
   background:rgba(237, 41, 57,0.6);

   border:1px solid #ffffff;
   overflow-y: scroll;
   width:300px;
   height:250px;
   transition: height 1s ease;
   overflow: hidden;
   text-align: center;

   font-family: 'Poiret One', cursive; 

 }

 .Scrollbox:hover {
    height:500px;
    overflow-y: hidden;
 }

Answer 3

你的过渡做了很奇怪的事情，所以我把它删除了。

编辑：

我根据您的要求更改了代码。我不确定你overflow-y: scroll;为什么在那里。我以为你想要这些滚动，所以我拿出了之前的一些东西。

我离开了下面的解释，以防您正在寻找其他overflow-y: scroll;内容。它可能在将来帮助你。

新代码只是使用td上的类，并将其垂直对齐到顶部。这比定位所有tr更好，因为这可能会在您正在使用的另一个表格的其他位置给您带来不良后果。

我将课程改为全部小写，因为大多数人在naming css classes时这样做。

以前的解决方案信息：

您可以实现此目的的一种方法是将css课程放在td上   元素优先。然后，您可以更改内部div的高度并进行设置   td根据需要overflow-y:scroll。但你也必须这样做   制作我不太喜欢的td元素display:block   这样做。我建议将这些改为模仿你的div   td正在做。

＆＃13;

td.scrollbox
{
  vertical-align: top;
}

td.scrollbox div
{
  background:rgba(237, 41, 57,0.6);
  width:300px;
  height: 250px;
  border:1px solid #ffffff;
  overflow-y: scroll;
  position: relative;
  text-align: center;
  overflow: hidden;
  font-family: 'Poiret One', cursive; 
}

td.scrollbox:hover div
{
  height: 500px;
}

＆＃13;

<table>
  <tr>
    <td class="scrollbox">
      <div>1</div>
    </td>
    <td class="scrollbox">
      <div>2</div>
    </td>
  </tr>
  
  <tr>
    <td class="scrollbox">
      <div>3</div>
    </td>
    <td class="scrollbox">
      <div>4</div>
    </td>
  </tr>
</table>

＆＃13;

Css悬停在div上导致它旁边的div变小？

3 个答案: