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