css - div标签，直线对齐

Question

我有 3 个 div 标签。我必须把它放在直线上。在我的代码中是 2、3、4。 2 和 3 在直线上，但 4 向下，不知道为什么。我是 html 和 css 的初学者。准确地说，我的元素是在 html 的透视图中创建一个房间。并使用 html canvas 绘制内容。但一开始就被吸引住了。请高手帮我出路。我在 Jsfiddle 中附加了我的整个元素，我需要解决方案的场景写在下面。

http://jsfiddle.net/kGpdM/855/

Html:

<div id="wall">
<div id="sidewall1" align="left">2</div>
<div id="center" align="center">3</div>
<div id="sidewall2" align="right">4</div>
</div>

css:

#sidewall1 {
float:left;
width:250px;
height:500px;
}
#sidewall2 {
float:right;
width:250px;
height:500px;
}

Answer 1

You didn't mentioned the property of ID 'center' so that div itself took a default width.
Div 4 comes down because total width (width of id 'row' here 1000px) - width of div 3 = less than 250 px.
Also if you are styling through css then try to avoid inline styling use css only.

Here is the modified code.

HTML

<div id="container">
    <div id="roof">1</div>
    <div id="wall">
        <div id="sidewall1">2</div>
        <div id="center" >3</div>
        <div id="sidewall2">4</div>
    </div>
    <div id="floor">5</div>
</div>

CSS

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#roof {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#wall {
padding: 0px;
height: 500px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#floor {
padding: 0px;
height: 250px;
width: 1000px;
margin-right: 0px;
margin-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#sidewall1 {
    float:left;
    width:250px;
    height:500px;

}
#sidewall2 {
    float:left;
    width:250px;
    height: 500px;
}
#center {
    float:left;
    width:250px;
    height: 500px;
}