0

我正在使用动态 PHP 标头开发一个站点，并且似乎已经使该部分正常工作。当试图将剩余内容与标题 div 一起放入容器 div 时，我的问题就出现了。所有其他内容都被忽略并被推到容器下方的左侧和下方。我希望它像标题一样位于容器内部并位于页面中心。

这是我在网站上的位置：http: //maniandcompany.com/test/test/Print.php

我尝试了几件事，包括溢出：隐藏；无济于事。

这是HTML页面

<div id="container">

<div id="header">   
<?php include 'header.php'; ?>
</div>


<div id="body">

    <div class="text">
    <h1>Title H1</h1>
    <h3>H3 Copy</h3>

    <h2>H2 Title</h2>
<p>body copy p</p>

    <span class="more_pictures">more images:</span>
    </div>

<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
    </div>


    </div>

    <div style="clear: both;"></div>

</div>

这是CSS

/*Container*/
#container {
    width:790px;
    margin:auto;
    overflow:hidden;
}

/*Body*/
#body {
    width:790px;
    margin-top:0px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #484941; 
    overflow:hidden;
}

.main_image {
    float:right;
    width:527px;
    height:350px;
    margin-left:3px;
}

.text {
    float:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    width: 220px;
    min-height: 350px;  
    margin-left:20px;
    margin-right:20px;
}

.text h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color: #666;
    text-transform: uppercase;

}

.text h2 {
    font-family: Arial, Helvetica, sans-serif; 
    font-size:12px;
    color: #F60;
}

.text h3 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style:italic;
    color: #CCC;
    padding-bottom: 20px;
}


.text p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color: #999;
    padding-bottom:10px;
}

.text .more_pictures {
    font-size:9px;
    font-style:italic;
    color: #999;
}



/*header*/
#header {
    width:790px;
    height:140px;

}

#head {
        width:790px;

}

/*logo*/
#logo {
    float:left;
    width: 260px;
    height: 100px;
}

/*main navigation*/
#nav_main {
    float:left;
    font-size: 12px;
    color: #000;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    font-style: italic;
    width:240px;
    height:20px;
    text-align:center;
    margin-left:20px;
    margin-top:110px;
    position:absolute;
    z-index:2;

}

#nav_main .current {
    float:left;
    padding-right: 10px;
    color: #F60;
    text-decoration: none;


}

#nav_main .current a:link {
    color: #F60;
    text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active  {
    color: #F60;
    text-decoration: none;
}


#nav_main .inactive {
    padding-right: 10px;
    float:left;
    color: #000;
    text-decoration: none;

}

#nav_main .inactive a:link{
color: #000;
    text-decoration: none;
}
#nav_main .inactive a:visited {
    color: #000;
    text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
    color: #F60;
    text-decoration: none;
}


/*NAV STYLES*/

#nav {
    float:right;
    height: 100px; /*height of our content box*/
    width: 527; /*width of our content box*/
    margin-left:3px;

}

#nav #greybox {
    height: 20px;
    width: 527px;
    background: #CCC;
    background-color: #ccc;
    margin-bottom:5px;

}

#nav #greybox2 {
    height: 20px;
    width: 527px;
    background: #CCC;
    background-color: #ccc;
    margin-top: 60px;
}


/*Thumbstrip*/

#nav #thumbStrip {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #F60;
    -webkit-backface-visibility: hidden;
    float: left;
    height: 70px;
    width: 527px;
    margin-bottom:5px; 

}
#nav #thumbStrip .thumb {
    float: left;
    width: 50px;
    height: 50px;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    margin-left: 3px;
    -moz-box-shadow: 0px 0px 0px #FFF;
    -webkit-box-shadow: 0px 0px 0px #FFF;
    box-shadow: 0px 0px 0px #FFF;
    opacity:0.4;
    filter:alpha(opacity=40);

}
#nav #thumbStrip .thumb:hover {
    -moz-transform: scale(1.7);
    -moz-transform-origin: center top;
    -webkit-transform: scale(1.7);
    -webkit-transform-origin: center top;
    transform: scale(1.7);
    transform-origin: center top;
    background: #FFF;
    -moz-box-shadow: 0px 1px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 1px 3px #FFF;
    box-shadow: 0px 1px 1px 3px #FFF;
    height: 60px;
    overflow: visible;
    opacity:1.0;
    filter:alpha(opacity=100);
    position: relative;
    z-index:1;

}
#nav #thumbStrip .thumb .first {
    margin-left: 0px;
}

#nav #thumbStrip .thumb p {
    margin: 0;
    line-height: 1;
    text-align: center;
    font-size: 60%;
    color: inherit;
    text-transform: uppercase;
}

#nav #thumbStrip .thumb img {
    display: block;
    margin-bottom: 2px;
    cursor: pointer;

}
#nav #thumbStrip a:link, .thumbStrip a:visited {
    font-size: 0.8em;
    color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
    border: none;
    color: #F60;
}


/*Thumbstrip First*/

#nav #thumbStrip .thumbfirst {
    float: left;
    width: 50px;
    height: 50px;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    margin-left: 0px;
    -moz-box-shadow: 0px 0px 0px #FFF;
    -webkit-box-shadow: 0px 0px 0px #FFF;
    box-shadow: 0px 0px 0px #FFF;
    opacity:0.4;
    filter:alpha(opacity=40);

}
#nav #thumbStrip .thumbfirst:hover {
    -moz-transform: scale(1.7);
    -moz-transform-origin: center top;
    -webkit-transform: scale(1.7);
    -webkit-transform-origin: center top;
    transform: scale(1.7);
    transform-origin: center top;
    background: #FFF;
    -moz-box-shadow: 0px 1px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 1px 3px #FFF;
    box-shadow: 0px 1px 1px 3px #FFF;
    height: 60px;
    overflow: visible;
    opacity:1.0;
    filter:alpha(opacity=100);
    position: relative;
    z-index:1;

}

#nav #thumbStrip .thumbfirst p {
    margin: 0;
    line-height: 1;
    text-align: center;
    font-size: 60%;
    color: inherit;
    text-transform: uppercase;
}

#nav #thumbStrip .thumbfirst img {
    display: block;
    margin-bottom: 2px;
    cursor: pointer;

}

/*thumb active first*/

#nav #thumbStrip .thumbActiveFirst {
    float: left;
    width: 50px;
    height: 50px;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    color: #F60;
    -moz-box-shadow: 0px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 3px #FFF;
    box-shadow: 0px 1px 3px #FFF;
    opacity:1.0;
    filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
    -moz-transform: scale(1.7);
    -moz-transform-origin: center top;
    -webkit-transform: scale(1.7);
    -webkit-transform-origin: center top;
    transform: scale(1.7);
    transform-origin: center top;
    background: #FFF;
    -moz-box-shadow: 0px 1px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 1px 3px #FFF;
    box-shadow: 0px 1px 1px 3px #FFF;
    height: 60px;
    overflow: visible;
    opacity:1.0;
    filter:alpha(opacity=100);
    position: relative;
    z-index:1;
}


#nav #thumbStrip .thumbActiveFirst p {
    margin: 0;
    line-height: 1;
    text-align: center;
    font-size: 60%;
    color: inherit;
    text-transform: uppercase;
}

#nav #thumbStrip .thumbActiveFirst img {
    display: block;
    margin-bottom: 2px;
    cursor: pointer;
}


/*thumb active*/

#nav #thumbStrip .thumbActive {
    float: left;
    width: 50px;
    height: 50px;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    color: #F60;
    margin-left: 3px;
    -moz-box-shadow: 0px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 3px #FFF;
    box-shadow: 0px 1px 3px #FFF;
    opacity:1.0;
    filter:alpha(opacity=100);


}
#nav #thumbStrip .thumbActive:hover {
    -moz-transform: scale(1.7);
    -moz-transform-origin: center top;
    -webkit-transform: scale(1.7);
    -webkit-transform-origin: center top;
    transform: scale(1.7);
    transform-origin: center top;
    background: #FFF;
    -moz-box-shadow: 0px 1px 1px 3px #FFF;
    -webkit-box-shadow: 0px 1px 1px 3px #FFF;
    box-shadow: 0px 1px 1px 3px #FFF;
    height: 60px;
    overflow: visible;
    opacity:1.0;
    filter:alpha(opacity=100);
    position: relative;
    z-index:1;
}


#nav #thumbStrip .thumbActive p {
    margin: 0;
    line-height: 1;
    text-align: center;
    font-size: 60%;
    color: inherit;
    text-transform: uppercase;
}

#nav #thumbStrip .thumbActive img {
    display: block;
    margin-bottom: 2px;
    cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
    font-size: 0.8em;
    color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
    border: none;
    color: #fff;
}

#nav #thumbStrip .thumb .first {
    margin-left: 0px;
}

在此先感谢您的帮助。

4

1 回答 1

0

源页面上的第 119 行有一个 div 结束标记，它在您的“清除”div 之前结束您的“body”div。

<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>


</div>  <-- erase this closing tag.

<div style="clear: both;"></div>

</div>

更不用说你有 2 组打开和关闭头部和身体标签。我不确定你是否在其中包含一个 php 文件，然后在你的其他页面中重复它们或什么，但该页面上有很多杂散标签。

于 2013-01-23T06:27:21.843 回答