水平對齊div，無需換行符

Question

我有這個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組合來完成所需的工作。

Answer 1

#container {
    white-space:nowrap;
}

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

Answer 2

這是你想要的？ 我只是不去問您在查詢中提到的內容：

單擊兩個水平對齊的DIV，它們會移動。 在這里查看： http : //jsfiddle.net/thePav/ZmjU5/18

的CSS

.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}

的HTML

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

JS

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

很粗糙，但這是一個基本想法。

Answer 3

如果父div的寬度不大於兩個div的合並寬度，則無法對齊div

這是小提琴這是我的小提琴

JsFiddle