并排没有浮动

Question

如何使div'left'和'right'看起来像列并排？

我知道我可以使用浮动:留在他们身上然后会起作用......但是在这里的第5步和第6步http://www.barelyfitz.com/screencast...s/positioning/ 这家伙说有可能,我不能让它工作......

码:

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>

Answer 1

不使用floats 的常用方法是使用display: inline-block:http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

不要但要注意它的局限性:有第一阵营后,额外的空间-这是因为这两个区块现在基本inline元素,如a和em,因此空白两数之间.这可能会破坏你的布局和/或看起来不漂亮,我宁愿不为了这个工作而去除角色之间的所有空格.

在大多数情况下,浮子也更灵活.

Answer 2

A div是块级元素,意味着它将表现为块,并且块不能并排放置而不会浮动.但是,您可以将它们设置为内联元素:

display:inline-block;

试试看...

另一种方法是使用它们:

position:absolute;
left:0;

和/或

position:absolute;
right:0;

注意:为了使其按预期工作,包装元素必须具有一个,position:relative;以便具有绝对定位的元素保持相对于其包装元素.