2015-06-14 8 views
1

У меня есть контейнер div, который не выравнивается должным образом, и я не могу держать div внутри контейнера div, выровненного вправо или влево. Он продолжает выходить из основного div или контейнера.Контейнер div не выравнивается правильно

Вот мой простой дизайн домашнего но дивы не отступ должным образом в соответствии с этим расположением:

#container{ 
 
background-color:white; 
 
width:100%; 
 
height:1200px; 
 

 
} 
 

 
#logo{ 
 
background-color:yellow; 
 
width:30%; 
 
height:100px; 
 
float:left; 
 
} 
 

 

 
#header{ 
 
background-color:green; 
 
width:100%; 
 
height:100px; 
 
float:left; 
 
} 
 

 
#navigation{ 
 
width:100%; 
 
height:40px; 
 
background-color:white; 
 
float:left; 
 
} 
 

 

 
#webname{ 
 
background-color:gray; 
 
width:70%; 
 
height:100px; 
 
float:right; 
 
} 
 

 
#mainclass{ 
 

 
width:100%; 
 
height:950px; 
 
float:left; 
 

 
} 
 

 

 
#asideright{ 
 
background-color:red; 
 
width:10%; 
 
height:950px; 
 
float:right; 
 
} 
 

 
#asideleft{ 
 
background-color:purple; 
 
width:20%; 
 
height:950px; 
 
float:left; 
 
} 
 

 
#selection{ 
 
background-color:yellow; 
 
width:70%; 
 
height:950px; 
 
float:center; 
 
} 
 

 
#footer{ 
 
background-color:green; 
 
width:100%; 
 
height:100px; 
 
float:;left; 
 
}
<html> 
 
\t <head> 
 
\t <title id="title">DUMMY 
 
\t </title> 
 
\t <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> 
 
\t <link rel="stylesheet" type="text/css" href="dumm1.css"> 
 
\t </head> 
 

 
<body> 
 
\t 
 
\t <div id="container"> 
 
\t 
 
\t \t <div id="header"> 
 
\t \t \t <div id="logo"> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <div id="webname"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t \t <div id="navigation"> 
 
\t \t </div> 
 
\t 
 

 
\t \t <div id="mainclass"> 
 
\t \t \t <div id="asideleft"> 
 
\t \t \t </div> 
 
\t 
 
\t \t \t <div id="selection"> 
 
\t \t \t </div> 
 
\t 
 
\t \t \t <div id="asideright"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t \t <div id="footer"> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
</body> 
 

 

 
</html>

ответ

0

это ваш правильный CSS

#container { 
     background-color: white; 
     width: 100%; 
     height: 1200px; 
    } 

    #logo { 
     background-color: yellow; 
     width: 30%; 
     height: 100px; 
     float: left; 
    } 


    #header { 
     background-color: green; 
     width: 100%; 
     height: 100px; 
     float: left; 
    } 

    #navigation { 
     width: 100%; 
     height: 40px; 
     background-color: white; 
     float: left; 
    } 


    #webname { 
     background-color: gray; 
     width: 70%; 
     height: 100px; 
     float: right; 
    } 

    #mainclass { 
     width: 100%; 
     height: 950px; 
     /*float: left;*/ 
    } 


    #asideright { 
     background-color: red; 
     width: 10%; 
     height: 950px; 
     float: right; 
    } 

    #asideleft { 
     background-color: purple; 
     width: 20%; 
     height: 950px; 
     float: left; 
    } 

    #selection { 
     background-color: yellow; 
     width: 70%; 
     height: 950px; 
     float: left; 
    } 

    #footer { 
     background-color: green; 
     width: 100%; 
     height: 100px; 
     float: left; 
    } 
0

Там нет такого свойства, как float: center; вы должны изменить это свойство для #selection в float: left;.

Обратитесь к руководству this.

0

Вы можете использовать этот подход.

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 1170px; 
 
} 
 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    background-color:red; 
 
} 
 
.row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 
.inner_div 
 
{ 
 
    width: 25%; 
 
    float:left; 
 
    
 
    background-color:green; 
 
} 
 
.big_div 
 
{ 
 
    width: 75%; 
 
    float:left; 
 
    
 
    background-color:yellow; 
 

 
}
<html> 
 
\t <head> 
 
\t <title id="title">DUMMY 
 
\t </title> 
 
\t <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> 
 
\t <link rel="stylesheet" type="text/css" href="dumm1.css"> 
 
\t </head> 
 

 
<body> 
 
\t 
 
\t <div class="container"> 
 
\t 
 
\t \t <div class="row"> 
 
\t \t \t <div class="inner_div" style="background-color:purple;"> 
 
       i'm the inner container 
 
\t \t \t </div> 
 
\t \t 
 
\t \t \t <div class="inner_div" style="background-color:pink;"> 
 
       i'm another one 
 
\t \t \t </div> 
 
      
 
      <div class="inner_div" style="background-color:green;"> 
 
       another one 
 
\t \t \t </div> 
 

 
      <div class="inner_div" style="background-color:orange;"> 
 
       woho! another one 
 
\t \t \t </div> 
 

 
      <div class="big_div"> 
 
       yipee! i'm another container 
 
\t \t \t </div> 
 
      <div class="inner_div" style="background-color:red;"> 
 
       yehaa! i'm another container 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t \t <div id="navigation"> 
 
\t \t </div> 
 
\t 
 

 
\t \t <div id="mainclass"> 
 
\t \t \t <div id="asideleft"> 
 
\t \t \t </div> 
 
\t 
 
\t \t \t <div id="selection"> 
 
\t \t \t </div> 
 
\t 
 
\t \t \t <div id="asideright"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t \t <div id="footer"> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
</body> 
 

 

 
</html>