Выравнивать divs по вертикали

У меня проблема с моей страницей html. У меня есть 3 раздела: header, wrapper и footer, и я хотел бы, чтобы эти три секции были выровнены по вертикали. Но проблема заключается в мой раздел пять не в моей секции оболочки, а под ним, на том же уровне, чем в разделе колонтитулаВыравнивать divs по вертикали

Вот мой HTML-страница:

<<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
     <!-- Header--> 
     <section id="header"> 
     </section> 
     <!-- Wrapper --> 
     <section id="wrapper"> 
      <section id="initial"> 
      </section> 
      <!-- Main --> 
      <div id="main"> 
       <!-- Prices --> 
       <section id="one"> 
        <section id="two"> 
        </section> 
        <section id="three"> 
        </section> 
       </section> 
       <section id="four"> 
       </section> 
      </div> 
      <section id="five"> 
      </section> 
     </section> 
     <section id="footer"> 
     </section> 
    </body> 
</html> 


#wrapper { 
    transition : transform 0.5s; 
    padding: 44px 0 1px 0; 
    border :0; 
    font-size : 100%; 
    font : inherit; 
    vertical-align : baseline; 
    box-sizing : border-box; 
    display :block; 
    height : 990px; 
} 

#footer { 
    background-image: url("../img/logos.png"); 
    position:relative; 
    display:block; 
    background-repeat:no-repeat; 
    height : 100px; 
    font-size : 200%; 
    text-align: center; 
} 

#main { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    box-sizing: border-box; 
    display: block; 
}

источник

2015-08-03 saloua

в каком браузере? отлично выглядит для меня в jsfiddle на firefox – atmd

Я использую chrome – saloua

Выглядит хорошо для меня в jsfiddle на хроме. – trex005

Я считаю, что это this эффект, который вы хотите:

HTML:

<header> 
    <h1>Header</h1> 
</header> 
<div id="main" role="main"> 
    <section id="one"> 
     <h2>Section Heading One</h2>   
    </section> 
    <section id="two"> 
     <h2>Section Heading Two</h2>   
    </section> 
    <section id="three"> 
     <h2>Section Heading Three</h2>   
    </section> 
    <section id="four"> 
     <h2>Section Heading Four</h2>   
    </section> 
    <section id="five"> 
     <h2>Section Heading Five</h2>   
    </section> 
</div> 
<footer> 
    <p>Footer</p>  
</footer>

CSS:

header 
{ 
    width: 100%; 
    height: auto; 

    text-align: center; 

    background-color: whitesmoke; 
} 

#main 
{ 
    width: 100%; 
    height: auto; 

    background-color: khaki; 
} 

section 
{ 
    width: 100%; 
    height: auto; 

    text-align: center; 
    padding: 5px 0 5px 0; 
} 

footer 
{ 
    width: 100%; 
    height: auto; 

    text-align: center; 

    background-color: lightgrey; 
}

источник

2015-08-03 09:51:38 Aston

Большое вам спасибо! :) – saloua

Выравнивать divs по вертикали

ответ

Смежные вопросы