Question

作为一个新手，我正在努力使用网站的CSS。

我已经创建了一个包含几个DIV和包装器的站点，但我无法获得内部DIV的溢出来拉伸外部DIV（包装器）。我见过http://www.sitepoint.com/examples/clearing_floats/example2.php，但我无法看到自己的错误。

提前致谢！

body { 
    text-align: center; 
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
    text-align: left; 
    width: 1250px; 
    padding: 0px; 
    margin: 0 auto;
    height: 100%;
    overflow:auto;
}
#logo {
    position: absolute;
    top: 50px;
    right: 10px;
}
#header {
    text-align:left;
    width: 100%;
    height: 155px;
    position: relative;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
    padding-left: 4px;
    z-index:9;
}
#menu {
    text-align: left;
    position: absolute;
    bottom: 6px;
    padding-left: 4px;
}
#headerimage {
    text-align: left;
    width: 100%;
    height: 268px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}
#mainwrapper {
    text-align:left;
    width: 100%;
    height: 488px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
    background-repeat: no-repeat;
}
#maincontent{
    width: 800px;
    height: 488px;
    float: left;
    padding-left: 15px;
    font-family:Verdana, Geneva, sans-serif; 
    color: #000000;
}
#newscontent{
    width: 360px;
    heigth: 200px;
    float: right;
    margin-top: 20px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
    overflow:hidden;
    color: #000000;
    padding-left: 15px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
#footer {
    height: 56px;
    background: url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    clear:both;
}

<div id="wrapper">
    <div id=header><div id="logo"></div> 
    <div id="menu">

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>

    </div>
</div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
    <div id="maincontent"><?php page_content(1); ?><br style="clear:both"/></div>
    <div id="newscontent">
<?php

// customized cwsoft-anynews function call
$config = array(
    'group_id_type' => 'section_id',
    'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);

?>

    <br style="clear:both"/>
</div> 
</div>    
<div id="footer"><br /></div>

Answer 1

如果您严格遵循您提供的链接，则您的newscontent div必须成为主要内容div的一部分，并且您的主要内容必须具有width = 100％。像这样：

<html>
<head>
<style>
body { 
text-align: center; 
background: url    (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg)
}
#wrapper {
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto;
height: 100%;
overflow:auto;

}
#logo{
position: absolute;
top: 50px;
right: 10px;
}

#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}

#menu{
text-align: left;
position: absolute;
bottom: 6px;
    padding-left: 4px;

 }

#headerimage{
text-align: left;
width: 100%;
height: 268px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}

#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
background-repeat: no-repeat;

}
#maincontent{
width: 100%;
height: 488px;
float: left;
padding-left: 15px;
 font-family:Verdana, Geneva, sans-serif;
color: #000000;

}

#newscontent{
width: 360px;
heigth: 200px;
float: right;
margin-top: 20px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/news_background.fw.png);
overflow:hidden;
color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
#footer{
height: 56px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}

</style>
</head>

<body>

<div id="wrapper">

<div id=header> <div id="logo"> </div> 
<div id="menu">            <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font     color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>    </div>   </div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/>
<div id="newscontent">
  <?php

    // customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);


?>
<br style="clear:both"/>
</div> 
 </div>
</div>    
<div id="footer"><br />
                    </div>



</body>
</html>

但是，如果你的newscontent div必须成为主要内容div的一部分，那就意味着要成为一种类似于视图的表格，你的新闻内容应该在最后填满自由空间 - 这可以通过这种方式实现：

<html>
<head>
<style>
body { 
text-align: center; 
background: url    (http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/background.jpg);

}
#wrapper {
text-align: left; 
width: 1250px; 
padding: 0px; 
margin: 0 auto;
height: 100%;
overflow-x:hidden;
}
#logo{
position: absolute;
top: 50px;
right: 10px;
}

#header {
text-align:left;
width: 100%;
height: 155px;
position: relative;
background:  url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r1_c2.jpg);
padding-left: 4px;
z-index:9;
}

#menu{
text-align: left;
position: absolute;
bottom: 6px;
    padding-left: 4px;

 }

#headerimage{
text-align: left;
width: 100%;
height: 268px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/keenfuel_r2_c2.jpg);
}

#mainwrapper{
text-align:left;
width: 100%;
height: 488px;
background:url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r    3_c2.jpg);
background-repeat: no-repeat;
position:relative;
}
#maincontent{
width: 800px;
height: 488px;
display:inline-block;
padding-left: 15px;
 font-family:Verdana, Geneva, sans-serif;
color: #000000;
overflow-x:hidden;
}

#newscontent{
left:800px;
heigth: 200px;
right:1px;
display:inline-block;
margin-top: 20px;

color: #000000;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
background-color:#770000;
overflow-x:hidden;
}
#footer{
height: 56px;
background:     url(http://www.keenfuel.nl/v2/wb/templates/keenfuel/images/body2_bg.fw_r6_c2.jpg);
text-align: center;
font-family: Verdana, Geneva, sans-serif;
clear:both;
}

</style>
</head>

<body>

<div id="wrapper">

<div id=header> <div id="logo"> </div> 
<div id="menu">            <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<font     color="#FFFFFF">  |  [ac][menu_title]</a>', '', '', '', '[ac][menu_title]</a></font>'); ?>    </div>   </div> 

<div id="headerimage"></div>

<div id="mainwrapper"> 
<div id="maincontent"><?php page_content(1); ?> <br style="clear:both"/> </div>
<div id="newscontent">
  <?php

    // customized cwsoft-anynews function call
$config = array(
'group_id_type' => 'section_id',
'display_mode' => 4,
'max_news_length' => 20,
);
echo getNewsItems($config);

?>
<br style="clear:both"/>
</div> 
</div>    
<div id="footer"><br />
                    </div>



</body>
</html>

包装和div的溢出

1 个答案: