页脚div文本不会对齐

havsalt 发表于 Dev

海盐

我想做的是将页脚中的3个div对齐。但我似乎无法让他们正确排队。当我尝试使用float时，只有其中两个会排成一行，而第三个则位于它们的下方。有人知道发生了什么吗？

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;
}

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

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

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

#rightFooter{
	text-align: right;
	float: right;
	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">
    	<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>
</html>

亚历克斯·查尔

我认为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>