我无法将 3 个 div 彼此相邻对齐。我以前从未遇到过这个问题，但现在我正在制作一个模板，其中背景对于网页的每个元素都有 100% 的宽度（永不结束）。
我想水平对齐 3 个 div 的元素对我不起作用。我可以让两个 div 彼此相邻，但是当我尝试对齐第 3 个 div 时，第 3 个 div 会对齐，但是整个元素会以某种方式搞砸。
非常感谢您的帮助！
这是完整的代码。我取出了其他网站元素来简化代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Website</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
strong {
font-weight:bold;color:#0289ce;
}
em {
font-style:oblique;
}
p {
margin:15px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}
a:link {color:#0289ce;}
a:hover {color:#f64274;}
/*End RESET - Begin Full Width CSS*/
body {
background:#FFFFBF;
color:#2D1F16;
font:13px Helvetica, Arial, sans-serif
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
background-color: #EC3515;
}
.wrapHeader {
position:relative;
margin:0 auto;
width:900px;
background-color: #9FF;
}
.wrapSlider {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
top: 67px;
right: 32px;
}
.wrapPackages {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
}
.multipleDivs {
height: auto;
width: 100%;
background-color: #CFF;
clear: both;
position: relative;
}
.wrapInfo {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
background-color: #A6FFFF;
height: auto;
clear: both;
}
#infoContent1 {
background-color: #666;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent2 {
background-color: #999;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent3 {
background-color: #CCC;
height: auto;
width: 300px;
}
.wrapContent {
position:relative;
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header, #footer {
width:100%;
float:left;
padding:15px 0;
}
#header {
background-color: #FFF;
}
#header .logo {
float:left;
width:400px;
}
#header p {
float:right;
width:400px;
margin:0;
}
#content {
padding:15px 0;
clear:both;
background-color: #F9C;
}
.imageSlider {
height: 570px;
width: 100%;
color: #FFF;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/bgSlider2.jpg);
}
.package {
height: auto;
width: 100%;
background-color: #CCC;
background-repeat: no-repeat;
background-position: center center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background:#EC3515;
text-align:center;
}
#footer a {
color:#fff;
}
</style>
</head>
<body>
<div id="header">
<div class="wrapHeader">
<div class="logo">
<a href="#"><img src="images/#.png" width="250" height="62" /></a>
</div>
<p>Sample text</p>
</div>
</div>
<div class="wrapContent">
<div id="content">
<div class="multipleDivs">
<div class="wrapInfo">
<div id="infoContent1">
<p>Div 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="infoContent2">
<p>Div 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="infoContent3">
<p>Div 3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="package">
<div class="wrapPackages">
<img src="images/sampleImage.jpg" width="900" height="475" border="0" /></div>
</div>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<div class="wrap">
<p>© 2013 - <a href="http://fillertext.com">Sample Text</a></p>
</div>
</div>
</body>
</html>
