3 つの div を並べて配置するのに問題があります。この問題はこれまで一度もありませんでしたが、現在、Web ページの各要素の背景の幅が 100% (決して終わらない) のテンプレートを作成しています。
水平方向に 3 つの div を配置したい要素が機能しません。2 つの div を並べて配置できますが、3 番目の div を整列しようとすると 3 番目の div が整列しますが、要素全体が何とかごちゃごちゃになります。
あなたの助けは大歓迎です!
これが完全なコードです。コードを簡素化するために、他の Web サイト要素を取り出しました。
<!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>
