浮动divs问题

-1

我有一个父母<div>包含多个孩子<div>。我需要将孩子<div>浮动到左侧。问题是我的父母<div>未正确展开，最后一个子女<div>正在低于其他子女<div>。
我试着设置父母<div> css到overflow:hidden; clear:both;但他们都没有工作。
请让我知道任何可能的解决方案浮动divs问题

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> '

来源

2012-12-06 SRK

如果可能，请发布您的html – trebuchet

您可以向我们提供HTML和CSS或jsFiddle上的演示您正在尝试的内容吗？我们需要一个良好的基础开始，即使它是一些图像。谢谢。 – Abriel

这里是一个很好的文章有关HTML positioning。

您正在使用position: absolute和float: 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-06 04:52:04

嘿拉维看到基本的概念是，如果我们想实现你的愿望的结果所以我们可以很容易地不需要使用positioning，就像您在代码中使用的那样，我们可以通过以下方式轻松实现：floating

我提到贝洛W上的基本概念，知道你如何能得到你想要的结果....

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; 
}

DEMO

来源

2012-12-06 04:57:23

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

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

具有clear类的div可以用作使您的父母以您期望的方式回流的方式。将它放置在所有浮动元素的末尾，并在父项的结束标记之前。然后，像这样只需添加一些CSS到清晰的类。

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

注意到，如果你是在同样使用浮点数来创建它的列布局使用这一点，可以通过使其他列的元素做结算下方被推打破它。为了解决这个问题，你将不得不将父项包装在一个容器div中，并且浮动该容器，这将导致其他列不受浮动影响，因为清除不会延伸到浮动父项之外。

希望这可以帮助你。

来源

2012-12-06 04:57:28

上面的答案将工作..我发现使用overflow：hidden可能会导致复杂布局的奇怪问题。 –

回答

相关问题