文章/答案/技术大牛

发布

css从中间展开

CSS从中间展开基础概念

CSS从中间展开通常指的是通过CSS动画或过渡效果，使一个元素从中心点开始向两侧展开。这种效果可以通过多种CSS属性和技巧实现，例如使用transform属性的scale函数，或者结合width、height和margin属性。

类型

中心对称展开：元素从中心点向两侧均匀展开。
非中心对称展开：元素从中心点向一侧或特定方向展开。
渐变展开：元素在展开过程中颜色或透明度发生变化。

应用场景

按钮点击效果：用户点击按钮时，按钮从中间展开。
菜单展开：点击菜单图标时，菜单从中心向两侧展开。
卡片展开：点击卡片时，卡片内容从中心展开显示更多信息。

示例代码

以下是一个简单的CSS从中间展开的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Center Expand</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 50px auto;
            transition: transform 0.5s ease-in-out;
        }

        .box:hover {
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

参考链接

遇到的问题及解决方法

问题：元素展开时超出容器边界

原因：元素的展开尺寸超出了其父容器的边界。

解决方法：

设置父容器的overflow属性：
设置父容器的overflow属性：
调整元素的展开尺寸：
调整元素的展开尺寸：
使用max-width和max-height：
使用max-width和max-height：

通过以上方法，可以有效地解决元素展开时超出容器边界的问题。

页面内容是否对你有帮助？

有帮助

没帮助

可折叠面板中的Datatables列标题未自动展开

jquery-datatables

我的应用程序有一个左窗格和一个中间窗格。中间窗格显示数据表，左侧窗格用于浏览。我的左窗格是可折叠的，但是每当我折叠我的左窗格时，datatables中的列宽不会根据新的宽度自动调整大小，但当我单击任何列标题时，它会根据新的宽度展开/折叠。我不确定如何解决此问题。我尝试使用下面的代码，表可以正确地展开，但列不会展开/折叠，除非我单击列标题。function collapse () { $("#"+elementId).css('wid

浏览 2提问于2012-11-14得票数 0

回答已采纳

1回答

从堆栈中间展开堆栈

gdb、callstack、goto、stack-frame、setjmp

是否有可能删除堆栈中间的框架并将其返回内存？可以转到语句或longjmp函数来实现这一点吗？非常感谢。

浏览 1提问于2014-03-12得票数 4

回答已采纳

2回答

带有粘性页脚的渐变背景

sticky-footer、css

我试图在身体背景中添加一个渐变，从白色开始，在页面底部以灰色结尾。因为页面有一个粘性页脚，所以当内容大于浏览器窗口时，主体不会与内容一起拉伸/展开。所以梯度停止在中间。有人能帮忙吗？<body> <div class="footer"> </div></html

浏览 2提问于2012-01-24得票数 2

回答已采纳

2回答

如何单击一个div并使其更改其他div的大小，然后再次单击该div又更改回原来的大小

javascript、jquery、html、css

在左边和右边的div之间也有一个很小的div，可以点击，一旦点击，就会关闭或展开右边的div。1)在页面加载时，右侧div应打开。中间的div仍然是可见的，因此您可以再次单击它以展开该div 3)一旦你点击中间的div来拼接右侧的div，它就会折叠它，但它也会将该div的内容放在左侧主列div的下面。就像右边的div一样，我认为它有一个float:left的值，所以一旦左边的div被展开，它就会把那个div压到左边的下面。我已经尝试丢弃页面并重新构建我想要的部分，但没有任何运气，我真的很感

浏览 0提问于2011-11-05得票数 3

回答已采纳

1回答

如何使用我自己的html/css自定义Mapzen搜索控件？

html、mapzen

我如何定制一个L.Mapzen.geocoder以获取位于中心的HTML/CSS样式的搜索框(就像Mapzen中的那个)？

浏览 5提问于2017-08-23得票数 0

回答已采纳

1回答

重新排列彼此太近的点

javascript、css、algorithm、design-patterns、math

我的例子是，我在静态地图图像上动态地定位了一堆图标，每个图标都是由CSS绝对定位的。现在经常发生的情况是，两个或更多的点彼此太近，因此图标重叠，它们不再有区别。我正在寻找一个算法，以找到这些“太接近对方”的点，然后展开他们的图标以一种方式，他们不再重叠彼此。我想到的是径向差，就像找出所有过近点的平均中间点，然后把它们相对于那个点展开。

浏览 1提问于2013-10-16得票数 3

回答已采纳

2回答

在SpriteKit场景中以生成的行为中心

ios、swift、sprite-kit

我正在制作一个越狱游戏，游戏从我想要在那一行的砖块中生成很多行。但我不能让行从中间开始。我将如何实现这一点，这是我的当前代码。我试过很多次，但最接近的是让他们都站在中间，但应该从中间展开。我想达到的目标应该是这样的。

浏览 5提问于2022-03-01得票数 0

回答已采纳

3回答

如何从中心(或其他有效的备选方案)扩展选择器的宽度？

javascript、html、css

我有一个导航条(#nav_bar)，它具有以下CSS属性： background: url(..我试图设置width: 500%;只是为了看看它会做什么，然后我意识到它是从左->向右扩展的，而不是从中间两个方向展开的。所以，我想问的是；是否有可能从中心展开一个元素，然后也许我可以设置max-width属性或使用javascript来查找访问者屏幕分辨率，然后从那里分配宽度；而不是主要的低效率，即延长加载时间/跨浏览器兼容性问题

浏览 1提问于2011-11-25得票数 0

回答已采纳

2回答

如何使用javascript或jquery显示溢出:隐藏内容

css

我有一个包含CSS的div内容：overflow:hidden;因此，一旦单击expand，我希望该div的css从：所以知道div会展开到css中指定的高度，如果展开按钮变成折叠，点击时反之亦然，那就太好了。

浏览 1提问于2013-03-24得票数 0

1回答

如何将文字包裹起来，这样我的手风琴图像就可以OutSide我的aAccordion了

html、css、twitter-bootstrap

我的手风琴也有一个图像，让用户知道他们可以展开/折叠它。这是通过CSS完成的，如下所示：{ </div> </div>但我遇到的问题是，当文本结束时，它会将我的图像从灰色框中推开，如下所示

浏览 2提问于2014-09-16得票数 0

回答已采纳

4回答

如何自动创建扩展块

html、css

左列和右列都应该显示一个单词，而不需要截断(它们应该展开并收缩以适应这个单词)。中间列应该显示一个可能很长的字符串，在这两列之间截断以适合。Center center center center center center center</div></div> display: inline-block; overflow: hidde

浏览 6提问于2010-01-22得票数 1

回答已采纳

1回答

Img在单击时扩展到100% (并且仍然坚持到网格)

javascript、html、css、image、grid

这就是我正在做的工作： $('.sec-img').click(function() { width: '100%' });我希望它能做的是：当您单击任何图像时，它会展开(如果在展开的图像上方有一个图像，则小图像将被推入扩展图像之下。我已经尝试过使用:after来获得这两

浏览 2提问于2014-09-25得票数 0

4回答

具有固定和响应元件的Css流体布局

css、responsive-design、fluid

="seekbar"></div> <div class="volume"></div>(只使用css，跨浏览器) 谢谢!

浏览 3提问于2016-04-06得票数 0

回答已采纳

1回答

使div在另一个div之间展开，如果溢出，则滚动。

css、html、scroll、position

我遇到了这样的css问题：我有3个div，假设它们都堆放在一个列中(比如3行的表)，顶部的和底部的都有height: 100px;和position: absolute;，它们就像页眉和页脚，它们总是粘在表单的顶部和底部整个表单的高度可以根据表单中的其他元素而变化，所以我需要我的中间div在其他两个div之间，如果它不适合它的内容，可以滚动。(例如，页眉和页脚是100px高度，表单只是500px高度，中间div中的文本非常长) <- -此时中间div展开并扩展整个表单。

浏览 3提问于2013-09-12得票数 1

回答已采纳

1回答

通过css转换，从中间向左和右展开宽度。

jquery、html、css、transition

我想要我的导航条，它的有一个固定宽度的，并且是居中的，在页面滚动中从它的中心向左和右展开。目前，它只是跳到了新的宽度。/bootstrap.min.css" rel="stylesheet"/> <link href="http://mirsoftware.de/muthbau/css/jquery-ui.min.cssIt includes the responsive CS

浏览 1提问于2016-02-16得票数 4

2回答

NetBeans没有生成@author和@版本的javaDoc吗？

java、netbeans、ide、javadoc

默认情况下，NetBeans不会从@author和@version标签生成文档。如何从IDE中启用此功能？编辑:在NetBeans中确实有一个显示这些标签的选项。Run>Set项目Configuration>Customize...展开Build并选择Documenting -复选框就在中间。

浏览 1提问于2010-10-19得票数 2

回答已采纳

2回答

如何根据图像自动调整自定义CSS按钮的大小

css、button、properties、background

我试图使用这些图像作为按钮元素上的css的基础。当增加更多文本时，该按钮需要能够调整大小，方法是展开中间部分(保持左、右不动，不拉伸)。

浏览 1提问于2019-09-03得票数 0

回答已采纳

1回答

表到DIV和CSS

css、html

问题：可以用DIVs和CSS来完成吗？(而不是html表) 当中间单元格中的内容较大时，整个表就会展开到左、右和底部。 

浏览 4提问于2013-10-20得票数 0

2回答

BootStrap 3构建主页

html、css、twitter-bootstrap-3

我想创建的主页面，与导航，导航左侧和内容在中间。菜单和导航面板应该固定在屏幕上。只有内容应该是可滚动的。当菜单被展开时，内容被推到右边，而不是元素在里面重新排序，只是按在右边，所以当菜单被展开时，右边的一部分内容将隐藏在屏幕之外。以下是用于说明的图片：因此，当我悬停菜单时，它会展开并将内容向右推。当鼠标不在菜单中时，它会折叠，只显示图标。我是CSS的初学者，这对我来说很难，我尝试了很多，但没有办法建立这个页面。我把菜单和内容放在float: left上

浏览 23提问于2017-06-29得票数 0

1回答

脚贴底

javascript、jquery、html、css、twitter-bootstrap

页脚最初被粘在页面底部，如果我从手风琴上展开另一个面板，它仍然在底部。问题是，当所有的面板都倒塌时，身体的高度低于窗户的高度。在这个场景中，页脚不粘在窗口的底部，它位于手风琴结束的窗口的中间。vwptHeight = $(window).height(); $("footer#pageFooter").css("position","absolute").css

浏览 2提问于2014-05-08得票数 0

回答已采纳

点击加载更多

css从中间展开