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

在DIV转换时固定子级位置

css3 css javascript

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

我的设置如下

<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 回复 | 直到 7 年前

Kaushik Andani 7 年前

当鼠标悬停时,可以使用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>

semuzaboi 7 年前

我知道有多种方法可以解决这个问题- 如果您不反对使用定位-您可以设置 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

Moose 7 年前

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

    .wrapper {
       justify-content:center;
    }

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

    .element {
        margin-left:35px;
    }

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前