代码之家 › 专栏 › 技术社区 › four-eyes

在DIV转换时固定子级位置

css3 css javascript

3

four-eyes · 技术社区 · 6 年前

我的设置如下

<div class=wrapper>
  <div class=element />
</div>

标记

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
}

https://codepen.io/anon/pen/eLzGXY

现在,当我点击 Icon , the 偶像 移动到 wrapper ,当它转换时。我要它保持在左边,在它原来的位置。我该怎么做?

3 回复 | 直到 6 年前

1

0

Kaushik Andani 6 年前

当鼠标悬停时,可以使用set css属性来实现。

请参见下面的示例。

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
    justify-content: left;
    padding-left:35px;
}

<div class=wrapper>
  <div class=element>
  </div>
</div>

2

0

semuzaboi 6 年前

我知道有多种方法可以解决这个问题- 如果您不反对使用定位-您可以设置 element 绝对的地位和一些下流的 left 你可以实现你想要的。

.element {
  background-color: hotpink;
  width: 10px;
  position:absolute;
  left:37px;
  height: 10px;
}

https://codepen.io/anon/pen/OoXOPo#anon-login

或者我们可以使用 relative 与一些 justify-items:start 在父容器上放置 要素 总是在它的位置上

https://codepen.io/anon/pen/eLzeZp

3

0

Moose 6 年前

要使Square类元素保持在左侧,请删除:

    .wrapper {
       justify-content:center;
    }

然后对元素进行这样的边距:

    .element {
        margin-left:35px;
    }

https://codepen.io/FEARtheMoose/pen/mGEqVL