-1

<div>複数の child を含む親があります<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

ちょっとラビ、基本的な概念は、あなたの欲望の結果を達成したいのであれば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 に答える
0

これは、 HTML の配置に関する優れた記事です。

矛盾する 1 つのブロックに対してposition: absoluteandを使用しています。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-06T04:52:04.153 に答える