浮動小数点を左に残す

<html> 
    <head></head> 
    <body> 
     <div> 
      <div style="float: left; width: 300px; border: 1px solid black;"> 
       testomgsgo<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
      </div> 
      <div style="float: left; width: 300px; border: 1px solid black;"> 
       <div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div> 
      </div> 
      <div style="clear: both"></div> 
     </div> 
    </body> 
</html>

上記のコードでは、左側に可変の内容があり、右側のdiv（赤い枠）にdivが必要です。その下端が下端が左のdivの高さの底。浮動小数点を左に残す

私はオートトップマージンを使用しようとしましたが、問題は左側のdivに一致するように右側のdivの高さを得ることができないと思います。

これを行うには何らかの方法がありますか、それとも高さに合わせるためにjavascriptに頼らざるを得ませんか？

出典

2011-12-20 Mikeb

は、あなたが探しているものは以下です：Safariでテスト済みhttp://jsfiddle.net/htfRw/

、Firefoxの

EDIT：

ここでは、コンテナ内部にある：http://jsfiddle.net/htfRw/2/

出典

2011-12-20 00:41:10

これは、彼が（ページの高さのように）100％の高さを望んでいる場合は動作します。私は彼がコンテナに列を望んでいると思う。 – Purag

ええと正確には、これは本当に近いですが – Mikeb

あなたが試してみました

margin-top: 0;

出典

2011-12-20 01:20:29 Dee

これはあなたが探しているものですか？

http://jsfiddle.net/7b3Pc/

基本的には、変数のdivは、その親のdivを介してすべての他の兄弟のdivの高さを制御します。絶対に配置された兄弟と高さ：100％。

<html> 
    <head></head> 
    <body> 
     <div> 
      <div style=" width:600px; border: 1px solid black; position:relative"> 
       <div style="width: 300px;"> 
       testomgsgo<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
       testete<br/> 
      </div> 
       <div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;"> 
        <div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2011-12-20 01:46:45 Vigrond

あなたがdownvote場合は、ご意見ください。 – Vigrond

それはちょうど推測ですが、私たちのうちの1人だけが投票していませんでした。プレイフィールドのレベルを+1する。 –

あなたは本当にすべてでここfloatを使用する必要はありません。私は、代わりにdisplay: inline-blockを使用することをお勧めします。vertical-alignプロパティを使用して、marginの代わりに2番目の<div>を垂直方向に配置することができます。

HTML：

<div> 
    testomgsgo<br/> 
    testete<br/> 
    testete<br/> 
    testete<br/> 
    testete<br/> 
</div><div class="second"> 
    <div></div> 
</div>

注決算</div>と<div class="second">の間にスペースがないこと。これらの要素は両方ともインライン要素であるため、マークアップ内の空白があれば、2つの要素の間に小さな水平なスペースができます。

CSS：

body > div { 
    width: 300px; 
    border: 1px solid #000; 
    vertical-align: bottom; 
    display: inline-block; } 
.second div { 
    background: #FF0000; 
    width: 50px; 
    height: 50px; }

プレビュー：http://jsfiddle.net/Wexcode/FwD3Q/

出典

2011-12-20 17:42:19 Wex

答えて

関連する問題