Question

我正在设计一个购物车网站，我有几个父div和子div，如下所示。问题是我设置为高度的div：当子内容增长时，auto不会扩展，在我的情况下，我不需要添加另一组（3）项目持有者（已经有3并且符合内容内部项目div但当我这样做时跳出父div。请帮帮我。

我的HTML

<!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>diluks eCommerce - Home</title>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
  <div class="level1">
    <div class="profile-bar"></div>

  </div>
  <div class="level2">
    <div class="logoarea"><img src="img/logo-bar.png" width="1000" height="100" /></div>

  </div>
  <div class="level3">
    <div class="body-content">
      <div class="side-bar"></div>
      <div class="nav-menu"></div>
      <div class="image-slider"><img src="img/main-img.png" width="785" height="220" /></div>
      <div class="seperate-space">
        <div class="separate-title"><a class="bold-captions">Latest Picks</a></div>


      </div>
<div class="items">
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/sunflowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/treecard.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>
  <div class="item-holder">
        <table align="center" width="256px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td class="item-info" align="center" height="34px">Item name</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="230px"><img src="img/3-flowers.png" width="256" height="230" /></td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="34px">$30</td>
            </tr>
            <tr>
                <td class="item-info" align="center" height="35px">Button</td>
            </tr>
        </table>
  </div>


</div>
    </div>


  </div>
  <div class="level4">
    <div class="footer-area">
      <div class="space-line"></div>
    </div>


  </div>
</div>
</body>
</html>

我的CSS样式表

@charset "utf-8";
.container {
    height: auto;
    width: 100%;
}
body{
    margin:0px;
    padding:0px;
    background-color:#F2F2F2;

    }.container .level1 {
    height: 35px;
    width: 100%;

}
.container .level2 {
    height: 100px;
    width: 100%;

}
.container .level3 {
    height: auto;
    width: 100%;
    min-height:685px;
}
.level3 .body-content {
    height: 100%;
    width: 1000px;
    min-height:685px;
    margin:auto;
}
.body-content .side-bar {
    float: left;
    height: 100%;
    width: 200px;
    min-height:685px;
    background-color:#CACACA;

}
.body-content .nav-menu {
    float: left;
    height: 35px;
    width: 800px;

    background-color:#CACACA;
}
.body-content .items {
    float: left;
    height: auto;
    width: 785px;
    min-height:335px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;
    position:relative;


}
.logoarea {
    height: 100px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#CACACA;
}
.profile-bar {
    height: 35px;
    width: 1000px;
    margin:auto;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#666;
}
.image-slider {
    float: left;
    height: 220px;
    width: 785px;
    padding-left:15px;
    padding-bottom:15px;
    padding-top:15px;
    padding-right:0px;

}
.level4 {
    height: auto;
    width: 100%;
    min-height:150px;
}
.space-bar{
    height: 15px;
    width: 100%;
    }
.space-line{
    height: 15px;
    width: 100%;
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#666;
    }   .footer-area {
    height: auto;
    width: 1000px;
    margin:auto;
    min-height:150px;
}
.seperate-space {
    float: left;
    height: 35px;
    width: 785px;
    padding-left:15px;
}
.separate-title {
    float: left;
    height: 28px;
    width: 780px;
    background-color:#CACACA;

    padding-top:7px;
    padding-left:5px;

}
.items .item-holder {
    float: left;
    height: 335px;
    width: 260px;
}
.item-info{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    color:#333;
    }
.bold-captions{
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#333;
    }

JSFiddle Demo

Answer 1

添加overflow: auto

.container .level3 {
   height: auto;
   width: 100%;
   min-height: 685px;
   overflow: auto;
}

Answer 2

我认为这就是你想要的：http://jsfiddle.net/bortao/XpSXK/

首先必须在clearfix上使用level3，因此浮动内容包含在那里（您的主要问题）。

然后侧杆出现问题：它始终以最小高度结束。因此将其设置为height:100%无效。此外，如果在此最小高度之后有内容，则它将在侧栏下方对齐。

所以我将side-bar带到body-content之外，使所有内容都与侧边栏的右侧对齐。

最后，为了使侧边栏的其余部分颜色相同，将level3的背景颜色设置为暗（与侧边栏相同），将body-content背景光设置为与身体相同。 / p>

Answer 3

将float：left添加到所有级别div

.level1,.level2,.level3,.level4{
        float:left;
    }

Divs伸出父div

3 个答案: