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>
你嘗試添加一個寬度爲每列? – shadeed9 2014-11-02 15:07:48
'float:center;'?可悲的是它不存在。 **對所有人使用'float:left;'**。 – 2014-11-02 15:09:31