1
我很難排列3個div彼此相鄰。我以前從未遇到過這個問題，但現在我正在爲網頁的每個元素製作一個背景寬度爲100％（永不結束）的模板。3 div彼此相鄰
我想水平對齊3個div的元素不適用於我。我可以得到兩個相鄰的div，但是當我嘗試對齊第三個div時，第三個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>
小提琴FTW：http://jsfiddle.net/NvbnY/ – karthikr
這不是你的問題的答案，但它可以被視爲一個提示：你有沒有嘗試過使用一個CSS框架如[tag：zurb-foundation]？ – SaidbakR