Тег 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

Вы не упомянули о собственности Я БЫ ' center ', так что div сам взял ширину по умолчанию.
Div 4 спускается, потому что общая ширина (ширина id 'row' здесь 1000px) - ширина div 3 = менее 250 пикселей.
Также, если вы разрабатываете css, тогда старайтесь избегать встроенного стиля, используя только CSS.

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

Answer 2

Атрибут стиля display:inline; добавления всех классов или н.о.р. ых и есть для дивы 2,3,4 будет делать.

Answer 3

Ширина экрана компьютера занимает всего несколько пикселей. Это осложняется тем фактом, что существует множество различных ширины экрана. Например, у вас есть мобильные телефоны, планшеты, ноутбуки и настольные компьютеры. Но даже те могут иметь разную ширину. Поэтому вместо использования width: 250px; , лучше сделать все те divs в процентах. Смотри ниже.

#sidewall1 { 
float:left; 
width:25%; 
height:500px; 
} 

#center { 
float: left; 
width: 49%; 
} 

#sidewall2 { 
float:left; // Change this to float left 
width:25%; 
height:500px; 
} 

отрегулируйте проценты в соответствии с тем, как вы этого хотите.

Answer 4

Изменение div s до inline может испортить другой стиль. Вместо этого вы должны изменить свой CSS, чтобы центральный div был включен последним. Я добавил цвета фона на ваш CSS, чтобы продемонстрировать:

jsFiddle

HTML

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

CSS

#sidewall1 { 
    float:left; 
    width:250px; 
    height:500px; 
    background-color: yellow; 
} 
#center { 
    display: block; 
    background-color: green; 
} 
#sidewall2 { 
    float:right; 
    width:250px; 
    height:500px; 
    background-color: red; 
}