Div并排，无浮点 [英] Div side by side without float

问题描述

如何让div'left'和'right'并排显示为列？

How can I make div 'left' and 'right' look like columns side by side?

我知道我可以使用float：left on they and that will work ... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
这家伙说是可能的，我不能得到它工作虽然...

I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/ the guy says it is possible, I can't get it work though...

代码：

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

推荐答案

不使用 float 是使用 display：inline-block ： http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

请注意其限制：在第一个块之后有一个额外的空间 - 这是因为两个块现在基本上是 inline 元素，例如 a 和 em ，所以空格之间的两个计数。这可能会打破你的布局和/或看起来不好，我不想去掉字符之间的所有空格，为了这个工作。

Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.

在大多数情况下，浮动也更灵活。

Floats are also more flexible, in most cases.

这篇关于Div并排，无浮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！