居中动画Divs

我有这个jfiddle，我发现我修改了一点点，以我的喜好。问题是我无法得到正确的对齐。我的目标是将五列全部折叠起来，并在展开时将它们居中。居中动画Divs

#mainContainer 
{ 
    margin:0 auto; 
    width: 500px; 
    height: 100%; 
    overflow: hidden; 
} 

.sidebar 
{ 
    float: left; 
    height: 300px; 
    width: 20%; 
    /* left: 565px;*/ 
    border: 2px red dashed; 
    /*position: relative;i*/ 
    overflow: hidden; 
    margin:0 0px 0 10px; 

}

**编辑**更清晰一点，看来，当一个DIV扩大它的中心。当它们全部关闭时，它们向左对齐。

谢谢！

来源

2014-02-28 user3363042

不明白你在说什么路线。你能更清楚一点吗？ –

对不起，编辑为清晰。如果您仍然感到困惑，请告诉我，谢谢。 – user3363042

@ user3363042就好了，您应该让所有侧边栏成为同一班级，例如“侧边栏”。 ID必须是独一无二的，就像你拥有它们一样，但是课程是为了应用于多个相似的元素;这些酒吧是一个很好的例子。这样，您可以在CSS中的单个类声明中设置高度，宽度等等，而不是每个声明中的一个。 – hannebaumsaway

演示在这里：http://jsfiddle.net/422MP/34/

这是一个容易得多，当你有固定宽度为您的元素，这是我做的。但是JavaScript更清洁。

要将元素居中，只需简单地删除float: left样式，这将对中心对齐产生严重影响，并将容器的text-align设置为center。

来源

2014-02-28 18:39:10 hannebaumsaway

绝对是我在找的，谢谢！ – user3363042

我需要在头脑中包含什么才能使其工作？出于某种原因，一旦我把它放在DreamWeaver中，这对我来说不起作用。 – user3363042

你需要包含jQuery。熟悉jquery.com的图书馆。同时，你可以在你的头文件中加入：'' – hannebaumsaway

所有的侧边栏都是float：left，javascript实际上使它们的宽度为10％，这意味着它们最终只占用容器的左半部分。包含所有侧边栏的div实际上居中。你可能想要改变JS让它们保持在20％，并打开包含div的div。

来源

2014-02-28 18:27:24 azurelogic

谢谢你的回复，我很难做到这一点。你知道我应该在js中完全改变吗？ – user3363042

回答

相关问题