2014-11-02 39 views
3

即时尝试做的是排队在页脚的3个divs。但我似乎不能让他们正确排队。当我尝试使用浮动时,只有其中两个会排队,而第三个会走到他们下面。任何人都知道发生了什么事?页脚div文本不会排队

body{ 
 
\t background-color: rgb(240, 240, 240); 
 
} 
 

 
#pageFooter{ 
 
\t margin-top: 10px; 
 
\t background-color: red; 
 
\t height: 200px; 
 
\t border-top-left-radius: 5px; 
 
\t border-top-right-radius: 5px; 
 
\t box-shadow: 1px 1px 1px 1px #888888; 
 
} 
 

 
#pageFooter p{ 
 
\t color: white; 
 
\t padding-left: 1em; 
 
\t font-family: sans-serif; 
 
\t vertical-align: middle; 
 
\t line-height: 40px; 
 
\t font-weight: bold; 
 
} 
 

 
#leftFooter{ 
 
\t text-align: left; 
 
\t float: left; 
 
\t position: relative; 
 
} 
 

 
#midFooter{ 
 
\t text-align: center; 
 
\t float: center; 
 
\t position: relative; 
 
} 
 

 
#rightFooter{ 
 
\t text-align: right; 
 
\t float: right; 
 
\t position: relative; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Oppgave 1</title> 
 

 
<link rel="stylesheet" type="text/css" href="css/meyersReset.css"> 
 
<link rel="stylesheet" type="text/css" href="css/mainStyle.css"> 
 

 
</head> 
 

 
<body> 
 

 
<div id="container"> 
 
     <footer id="pageFooter"> 
 
    \t <div id="leftFooter"> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t </div> 
 
    
 
    \t <div id="midFooter"> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
     \t </div> 
 
    
 
    \t <div id="rightFooter"> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  </div> 
 
    </footer> 
 

 
</div> 
 

 
</body> 
 
</html>

+1

你尝试添加一个宽度为每列? – shadeed9 2014-11-02 15:07:48

+1

'float:center;'?可悲的是它不存在。 **对所有人使用'float:left;'**。 – 2014-11-02 15:09:31

回答

4

我觉得display: table技术适合于您的情况:

body { 
 
    background-color: rgb(240, 240, 240); 
 
} 
 
#pageFooter { 
 
    margin-top: 10px; 
 
    background-color: red; 
 
    height: 200px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    box-shadow: 1px 1px 1px 1px #888888; 
 
    display: table;/*Add display table*/ 
 
    width: 100%; 
 
} 
 
#pageFooter p { 
 
    color: white; 
 
    padding-left: 1em; 
 
    font-family: sans-serif; 
 
    vertical-align: middle; 
 
    line-height: 40px; 
 
    font-weight: bold; 
 
} 
 
#leftFooter { 
 
    text-align: left; 
 
    display: table-cell;/*add display table-cell*/ 
 
    position: relative; 
 
} 
 
#midFooter { 
 
    text-align: center; 
 
    display: table-cell;/*add display table-cell*/ 
 
    position: relative; 
 
} 
 
#rightFooter { 
 
    text-align: right; 
 
    display: table-cell;/*add display table-cell*/ 
 
    position: relative; 
 
}
<body> 
 
    <div id="container"> 
 
    <footer id="pageFooter"> 
 
     <div id="leftFooter"> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     </div> 
 
     <div id="midFooter"> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     </div> 
 
     <div id="rightFooter"> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     <p>Lorem Ipsum</p> 
 
     </div> 
 
    </footer> 
 
    </div> 
 
</body>

2

没有float: center财产。

您必须float div并添加宽度以使它们正确对齐。

body{ 
 
\t background-color: rgb(240, 240, 240); 
 
} 
 

 
#pageFooter{ 
 
\t margin-top: 10px; 
 
\t background-color: red; 
 
\t height: 200px; 
 
\t border-top-left-radius: 5px; 
 
\t border-top-right-radius: 5px; 
 
\t box-shadow: 1px 1px 1px 1px #888888; 
 
} 
 

 
#pageFooter p{ 
 
\t color: white; 
 
\t padding-left: 1em; 
 
\t font-family: sans-serif; 
 
\t vertical-align: middle; 
 
\t line-height: 40px; 
 
\t font-weight: bold; 
 
} 
 

 
#leftFooter, #midFooter, #rightFooter{ 
 
\t float: left; 
 
\t position: relative; 
 
\t width: 33%; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Oppgave 1</title> 
 

 
<link rel="stylesheet" type="text/css" href="css/meyersReset.css"> 
 
<link rel="stylesheet" type="text/css" href="css/mainStyle.css"> 
 

 
</head> 
 

 
<body> 
 

 
<div id="container"> 
 
     <footer id="pageFooter"> 
 
    \t <div id="leftFooter"> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t \t <p>Lorem Ipsum</p> 
 
    \t </div> 
 
    
 
    \t <div id="midFooter"> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
     \t </div> 
 
    
 
    \t <div id="rightFooter"> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  \t <p>Lorem Ipsum</p> 
 
\t  </div> 
 
    </footer> 
 

 
</div> 
 

 
</body> 
 
</html>