Question

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

我试图让它看起来像以下......

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

Answer 1

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

Example

这样的事情：

#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或override with 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
}

Divs不会并排出现？

4 个答案: