-1

我有一个<div>包含多个 child的 parent <div>。我需要让孩子向左浮动<div>。问题是我的父母<div>没有正确展开，最后一个孩子<div>低于另一个孩子<div>。
我尝试将父<div>css 设置为overflow:hidden; clear:both;但它们都不起作用。
请让我知道任何可能的解决方案

CSS：

.rightpanel 
{
   width:80%;
   float:right;
}

HTML： 

<DIV id="div_rightPanel" class="rightpanel">
   <DIV style="WIDTH: 100%">
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 93px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2009" class="year">
         2009
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2009_2" class="quarter">Q2</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2009_3" class="quarter">Q3</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 62px" id="div_2009_4" class="quarter">Q4</DIV>
      </DIV>
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 124px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2010" class="year">
         2010
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2010_1" class="quarter">Q1</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2010_2" class="quarter">Q2</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 62px" id="div_2010_3" class="quarter">Q3</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 93px" id="div_2010_4" class="quarter">Q4</DIV>
      </DIV>
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 124px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2011" class="year">
         2011
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2011_1" class="quarter">Q1</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2011_2" class="quarter">Q2</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 62px" id="div_2011_3" class="quarter">Q3</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 93px" id="div_2011_4" class="quarter">Q4</DIV>
      </DIV>
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 124px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2012" class="year">
         2012
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2012_1" class="quarter">Q1</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2012_2" class="quarter">Q2</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 62px" id="div_2012_3" class="quarter">Q3</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 93px" id="div_2012_4" class="quarter">Q4</DIV>
      </DIV>
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 124px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2013" class="year">
         2013
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2013_1" class="quarter">Q1</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2013_2" class="quarter">Q2</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 62px" id="div_2013_3" class="quarter">Q3</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 93px" id="div_2013_4" class="quarter">Q4</DIV>
      </DIV>
      <DIV style="POSITION: relative; TEXT-ALIGN: center; WIDTH: 62px; FONT-FAMILY: calibri; FLOAT: left; HEIGHT: 50px; FONT-SIZE: small" id="div_2014" class="year">
         2014
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 0px" id="div_2014_1" class="quarter">Q1</DIV>
         <DIV style="POSITION: absolute; WIDTH: 31px; BOTTOM: 0px; FLOAT: left; HEIGHT: 25px; LEFT: 31px" id="div_2014_2" class="quarter">Q2</DIV>
      </DIV>
   </DIV>
</DIV> '
4

3 回答 3

0

这是一篇关于HTML 定位的好文章。

您正在使用position: absoluteandfloat: left用于一个矛盾的块。

要将内部块定位在某个容器块内，您可以使用：

<div class="container">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

和样式表：

.container
{
    float: left;
    width: 100%;
    height: 50px;
    background-color: #ccc;
}

.inner
{
    float: left;
    width: 25%;
    height: 50px;
    background-color: #aaa;
}
于 2012-12-06T04:52:04.153 回答
0

嘿 Ravi 看到基本概念是，如果我们想要实现您想要的结果，那么我们可以轻松地无需使用positioning您在代码中使用的我们可以通过以下方式轻松实现floating

我在下面提到基本概念想法如何获得所需的结果......

HTML

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

CSS

.parent {
border:3px solid blue;
  overflow:hidden;
}
.child {
width:25%;
height:20px;
float:left;
background:green;
}
.child:nth-child(2n) {
background:red;
}

演示

于 2012-12-06T04:57:23.567 回答
0

听起来你需要一个清除元素。

<div id="parent">
  <div class="child">content</div>
  <div class="child">content</div>
  <div class="clear"><!--no content--></div>
</div>

具有 clear 类的 div 可用作使您的父级以您期望的方式回流的方式。将它放在所有浮动元素的末尾，就在父元素的结束标记之前。然后像这样向 clear 类添加一些 css 。

.clear{
    clear:both;
    height:0;
}

请注意，如果您在还使用浮动来创建其列的布局中使用它，则可能会通过将其他列推到执行清除的元素下方来破坏它。要解决此问题，您必须将父级包装在容器 div 中并浮动容器，这将导致其他列不受浮动影响，因为清除不会延伸到浮动父级之外。

希望这对您有所帮助。

于 2012-12-06T04:57:28.980 回答