8

jsFiddle

HTML 

<div id="a">
  <div id="b">bbb</div>
  <div id="c">ccc</div>
</div>

CSS

#a {
  border: 1px solid black;
   *zoom: 1;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
  float: right;
  background-color: red;
}

赤いボックス（#c）を右下隅に揃えたい。

に追加position:relativeする#aと機能position:absolute;bottom:0;right:0し#cますが、追加するとすぐに青いボックスとコンテナ（#a）が折りたたまれます。#bどちらが高くなるかわからない#cので、両方にポジショニングを適用したいと思います。通常のクリアフィックスは、絶対位置にある要素では機能しません。

では、コンテナdivを折りたたむことなく、左下#bと右下に配置するにはどうすればよいですか？#c#a

4

7 に答える 7

1

これは私が信じていることをする必要があります

position: absolute;
top: auto;
bottom: 0px;

現時点ではテストできませんが、後でテストします。下部に配置するdivでcssを使用してください。

于 2013-01-14T16:46:18.617 に答える
1

まあ、これはかなり難解な解決策ですが、うまくいきます:)

#b と #c の両方を設定inline-blockして、通常のインラインのように相互に連携し、 を使用できるようにしますvertical-align。text-align:justify;次に、コンテナーに追加:afterしwidth:100%、#b と #c を左右にプルします。コンテナーのフォントを 0 に設定 (および内側のブロックで復元) して、アンダー/オーバーラインやその他のギャップを回避し、ゼロ フォントを :after に設定します。

#a {
  border: 1px solid black;
  text-align:justify;
  font-size:0;
  line-height:0;
}
#a:after {
  content:"";
  display:inline-block;
  width:100%;
}

#b, #c {
  display:inline-block;
}

#b {
  vertical-align:top;
}
#c {
  vertical-align:bottom;
}

font-size:0;IE では動作していないように見えるため、1px の負のマージンを使用する回避策はほとんど必要ありません。

/* ie fix */
#a {
  font:1px/0 sans-serif;
}
#b, #c {
  margin:0 0 -1px;
}

フィドル: http://jsfiddle.net/gv4qd/35/

于 2013-01-14T15:24:28.510 に答える
1

いくつかいじった後、これはうまくいくようです。トリックは、 を絶対に配置し#a、3 つすべてを相対的に配置された div に配置することです。#b#c

HTML

<div id="alpha">
  <p>Here is a box to give the<br /> outer<br /> container<br /> some<br /> height</p>
  <div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
  </div>
</div>

CSS

#alpha {
  position: relative;

}

#a {
  border: 1px solid black;
   *zoom: 1;
  position:absolute;
  height:100%;
  width:100%;
  top:0;bottom:0;
}
#a:before, #a:after {
   display: table;
    content: "";
    line-height: 0;
}
#a:after {
  clear: both;
}

#b {
  font-size: 36px;
  background-color: blue;
  position: absolute;
  left:0;
  bottom:0;
}

#c {
  background-color: red;
  position: absolute;
  right:0;
  bottom:0;
}

JSFiddle http://jsfiddle.net/mrmikemccabe/gv4qd/36/

ボックスにある程度の高さを与えるために、外側の div に段落を配置しました。外側の div に何もない場合は、CSS で外側の div の固定高を宣言するだけです。

于 2013-01-14T17:02:57.773 に答える
1

いくつかの異なるオプションをテストした後、親コンテナーで position:relative を使用すると、子タグをドキュメント ウィンドウではなく親に対して絶対的に配置できることがわかりました。

#a {
    border: 1px solid black;
    height: 500px;width:500px;
    position:relative;
    }

#b, #c{
       position:absolute;bottom:0;
      }
#b{
    left:0;
    font-size: 36px;
    background-color: blue;
    }

#c {
    right:0;
    background-color: red;
    }
于 2013-01-14T08:29:43.243 に答える
0

次のことを試してください。

#a {
  border: 1px solid black;
  *zoom: 1;
}
#a:before, #a:after {
  display: table;
  content: "";
  line-height: 0;
}
#a:after {
 clear: both;
}

#b {
  float: left;
  font-size: 36px;
  background-color: blue;
}

#c {
   float: right;
   background-color: red;
   position:absolute;
   bottom:0; right:0;
   vertical-align:bottom;
 }
于 2013-01-14T09:10:10.557 に答える
0

あなたのcssファイルのためにこれを試してください：

   #a {
        border: 1px solid black;  
        position:relative;
       *zoom: 1;
    }
    #a:before, #a:after {
       display: table;
        content: "";
        line-height: 0;
    }
    #a:after {
      clear: both;
    }

    #b {
      float: left;
      font-size: 36px;
      background-color: blue;
    }

    #c {
        float: right;
        background-color: red;
        position: absolute;
        bottom:0px;
        right:0px;
    }
于 2013-01-14T16:47:56.343 に答える
0

auter div位置を与える：相対

内側のdiv位置を指定します：absoluteおよびbottom：0px; 左：0px; またはあなたが好きな場所。

外側のdivの位置を与えることは非常に重要です：相対的。そうでない場合は、動作しない場合もあります。そしてもちろん、それはすべてのような非常に古いインターネットエクスプローラーでは機能しません。

絶対要素には高さがないため、指定された値（height：120pxなど）を使用できない場合は、f ***になります。これを行うには、javascriptを使用して、1つの絶対要素と2番目の要素の高さを確認し、特別なマージンを付けて追加します。

どのコンテナが一番上にあるかを確認するには、z-indexを使用できます。

別の方法があるのを忘れました。両方のdivの偽の重複コンテンツを使用しますが、これは多くの作業であるため、javascriptを使用するとより高速になります。

于 2013-01-14T10:52:13.127 に答える