Javascript 水平对齐div，不换行

我有这个html：

<div id='container'>
  <div class='container-element' id='el0'></div>
  <div class='container-element' id='el1'></div>
</div>

如何在没有换行符的情况下水平对齐“container element”div

基本上，我最初只想查看元素“el0”。
然后，如果我设置左“el0”的动画，我想查看“el1”

---

是我的基本小提琴，我找不到css组合来做我需要的。

如果父div的宽度不大于两个div的组合宽度，则无法对齐您的div

#container {
    white-space:nowrap;
}

.container-element {
    width:100%;
    float:left;
}

这是小提琴

---

这就是你要找的吗？ 我只是偏离了你在询问中提到的内容：

两个水平对齐的div，单击时会移动。在这里查看：

CSS

HTML

---

非常粗糙，但这是一个基本概念。

显然，在一个500像素宽的容器中并排放置两个500像素宽的元素是不可能的。我看不到你试图在小提琴中设置动画或显示/隐藏任何东西的痕迹…你想将所有div设置在同一行吗？是的，所有div都设置在同一行你需要用左键定位div并使其处于绝对位置，尝试使用此小提琴而不是创建两个（或更多类）你可以数一数你的子div，然后乘以你的宽度，在你的jqueryAs中应用.css（“左”，w*n+“px”），在这个小提琴中，我需要容器500px和元素500px（或100%），在这种情况下，替换div或给两个div 50%的宽度。你可能想看看我的答案<代码>空白：nowrap@NickDugger它可以工作，但是如果父dive有两倍的宽度，那么子divs你一定不明白什么是空白：现在rap有，你似乎也不明白这个问题。

JsFiddle

.wrapper {width: 504px; overflow: hidden}
#container {border: 1px solid #000; width: 1004px; overflow: hidden}
.container-element {border: 1px solid #f00; height: 200px; width: 500px; float: left}

<div class="wrapper">
    <div id='container'>
        <div class='container-element' id='el0'>  </div>
        <div class='container-element' id='el1'>  </div>
    </div>
</div>

$('.container-element').click(function(){
    $('#container').animate({
        marginLeft: -504
    }, 1000);
});