Question

我是这个html：

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

如何水平对齐＆＃34;容器元素＆＃34;没有换行的div？

基本上我想首先查看元素＆＃34; el0＆＃34;。
然后，如果我动画左边＆＃34; el0＆＃34;，我想查看＆＃34; el1＆＃34;。

This是我的基本小提琴，我无法找到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的组合宽度

这里是小提琴 Here is my Fiddle

JsFiddle

水平对齐div而不换行

3 个答案: