潜水者不会并排出现

Question

为什么下面的div不会并排出现？http://jsfiddle.net/YxCK4/

我试着让它看起来像下面这样。。。

___________________________
| left|                   |
|     |                   | 
|     |         main      |     <--- Window.
|     |                   |
|     |                   |
|-------------------------|

Answer 1

将<div>显示为inline-block或float它们是left

示例

类似这样的东西：

#window{
    width: 90%;
}
#left{
 padding: 10px; 
 width: 85px;  
    display: inline-block;
}
#main{
    display: inline-block;
}

Answer 2

块级元素不会自然并排，您必须手动定义这种行为。只需将两个div定义为float:left，即可将它们并排放置，例如

#left, #main { float:left }

Answer 3

div是块级元素，您需要使用内联元素，如span或用CSS float:left 覆盖

Answer 4

现在它做了jsfiddle，正如其他人所说，容器#left和#main都需要浮动+你不能指定90%的宽度，除非这个宽度超过了浮动时的可用空间，它会自动向下移动，必须首先尝试设置正确的宽度。我添加了这个

#left,#main 
{
float:left
}
#main
{
width:300px; // 90% is not correct here and will not work
}