首页 > 其他分享 >当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”

当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”

时间:2023-12-01 12:32:23浏览次数:24  
标签:hover 元素 width 宽度 增加 d2 d3 d1


当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”。

1.当div元素实现了左右居中时,当hover的时候设置width增大,那么宽度会默认从中间向两侧增加。(例子中的 id=d1)

2.一个未进行任何设置的div元素,当hover的时候设置width增大,那么宽度会默认向右增加。(例子中的 id=d2)

3.当div元素设置了margin:0 0 0 auto,当hover的时候设置width增大,那么宽度会默认从右向左增加。(例子中的 id=d3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            margin: auto;
            background-color: red;
            width:130px;
            transition: all 1s linear;
        }
        #d2{
            background-color: #5cb85c;
            width:120px;
            transition: all 1s linear;
        }
        #d3{
            margin: 0 0 0 auto;
            background-color: orange;
            width:120px;
            transition: all 1s linear;
        }
        #d1:hover,#d2:hover,#d3:hover{
            width:300px;
        }
    </style>
</head>
<body>
<div id="d1">从中间向两端 d1</div>
<div id="d2">从左向右 d2</div>
<div id="d3">从右向左 d3</div>
</body>
</html>

当元素宽度增加时,如何实现“向右增加”,“向左增加”,“从中间向两侧增加”_html


标签:hover,元素,width,宽度,增加,d2,d3,d1
From: https://blog.51cto.com/u_15808854/8644378

相关文章

  • css实现:不固定宽高,随内容宽度自动增长的圆形
    css代码:.circle{display:inline-block;border-radius:50%;min-width:20px;min-height:20px;padding:5px;background:red;color:white;text-align:center;line-height:1;box-sizing:co......
  • JavaScript 实现跨标签页移动元素效果
    该方案可实现跨浏览器容器进行拖动1.入口文件index.html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • 82. 删除排序链表中的重复元素 II
    82.删除排序链表中的重复元素II2021年3月25日​数据量300,数据大小[-200,200]​题意很简单,就考验你指针的使用。​两种方法桶排序暴力法思路很简单,加个100的偏移量,然后全都存下来,再倒着存进链表里返回即可。classSolution{public:ListNode*deleteDuplicates(......
  • 83. 删除排序链表中的重复元素
    83.删除排序链表中的重复元素2021年3月26日删除排序链表中的重复元素II的简化版,while套while就行为了时间,指针都不删除吗?classSolution{public:ListNode*deleteDuplicates(ListNode*head){ListNode*p=head;while(p&&p->next){w......
  • 让多媒体元素在既定容器中自由布局
    一功能可添加时间、日期、星期、字幕、图片、视频和背景音乐。可修改布局大小。画布及元素的个别属性(如x,y,width,height,fontsize)将会通过一定比例进行缩放,以此达到接近实际所看到的效果。可通过拖拽修改元素位置、添加新元素;可对元素进行收缩以改变其尺寸等属性。支持修改时间......
  • day1数组理论基础,704. 二分查找,27. 移除元素
    数组理论基础,704.二分查找,27.移除元素1数组理论基础1.1数组概念定义:存放在连续内存空间上的相同类型数据的集合。特点:1.数组中数据类型相同2.数组所占空间连续1.2数组创建2704.二分查找给定一个n个元素有序的(升序)整型数组nums和一个目标值target,写一个函数......
  • Ant-Design modal对话框未打开时,无法通过uesRef获取modal内部元素DOM节点
    为什么要记录下来呢?因为我在网上和chatGpt上没有搜到合适的解决方案。在CDNS上看到个和我遇到问题一样的,居然要收费才能看,所以自己记下来。当然肯定还有其他的好方案,欢迎大家留言。需求:使用antdV/g6画关系图,类似于企查查上面的那样:点击按钮打开Modal框,把数据渲染到Modal框的div......
  • 给定两个列表,找出他们相同的元素和不同的元素
    list1=[11,22,33,11]list2=[11,22,89,45]A=set(list1)#先去重B=set(list2)print(A&B)#相同的元素print(A^B)#不同的元素 ......
  • 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素
    LeetCode704二分查找题目链接:LeetCode704左闭右闭:视频讲解:手把手带你撕出正确的二分法思路:在循环条件中注明left<=right,即[left,right]classSolution{public:intsearch(vector<int>&nums,inttarget){intleft=0,right=nums.size()-1......
  • 油猴脚本屏蔽元素
    //==UserScript==//@nameBlockZhihuTag//@namespaceyour-namespace//@version1.0//@descriptionBlockaspecifictagonZhihuwebsite//@matchhttps://www.zhihu.com/*//@grantnone//==/UserScript==(function(){......