divをコンテナーの下部にフロートさせるにはどうすればよいですか？

float：right（またはleft）を何度も使用して、コンテナーの上部にあるイメージとインセットボックスをフローティングしました。最近、フロートで得られる通常のテキストの折り返し（上と左にのみテキストが折り返される）を使用して、別のdivの右下隅にあるdivをフロートする必要性に直面しました。

フロートにボトム値がない場合でも、これは比較的簡単なはずだと思いましたが、いくつかのテクニックを使用してそれを行うことができず、Webを検索しても絶対配置を使用する以外は何もできませんでしたが、これはありません正しい単語の折り返し動作を指定します。

これは非常に一般的なデザインだと思っていましたが、明らかにそうではありません。誰も提案がない場合は、テキストを別々のボックスに分割し、divを手動で配置する必要がありますが、それはかなり不安定であり、必要なすべてのページで行う必要はありません。

編集：ここに来る人のための単なるメモ。上記の重複としてリンクされている質問は、実際には重複ではありません。インセット要素をテキストで折り返す必要があるため、完全に異なります。実際、ここで最も投票された回答への回答は、リンクされた質問の回答がこの質問への回答として間違っている理由を明らかにしています。とにかく、この問題に対する一般的な解決策はまだないようですが、ここおよびリンクされた質問に投稿された解決策のいくつかは、特定のケースで機能する場合があります。

親divをに設定しposition: relative、次に内部divを...に設定します

position: absolute; 
bottom: 0;

...そしてあなたは行き​​ます:)

これを機能させる方法は次のとおりです。

• エレメントを通常どおりに浮かせます

• を使用して親divを180度回転します。

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle：http ://jsfiddle.net/wcneY/

• 次に、左に浮かぶすべての要素を180度回転させて（クラスを指定）、それらを再びまっすぐにします。出来上がり！彼らは底に浮かぶ。

数日間様々なテクニックに苦労した後、私はこれは不可能に思われると言わざるを得ません。（私がしたくない）javascriptを使用することさえ可能ではないようです。

理解していない可能性がある人のために明確にするために-これは私が探しているものです：パブリッシングでは、インセット（図、表、図など）をレイアウトして、その一番下が最後の一番下に並ぶようにしますブロック（またはページ）のテキストの行。テキストがページのどちら側にあるかに応じて、上から右または左に自然にインセットの周りを流れます。html / cssでは、フロートスタイルを使用して、インセットの上部をブロックの上部に揃えることは簡単ですが、驚いたことに、一般的なレイアウトタスクであるにもかかわらず、テキストの下部とインセットを揃えることは不可能に見えます。 。

ぎりぎりの提案がない限り、このアイテムの設計目標を再検討する必要があると思います。

JQueryでこれを実現するには、フロートの右側に幅0のストラット要素を配置し、次に、親の高さから浮動子の高さを差し引いて、ストラット（またはパイプ）のサイズを変更します。

jsが始まる前に、位置絶対アプローチを使用しています。これは機能しますが、テキストフローを背後に流すことができます。したがって、ストラットアプローチを有効にするために、静的位置に切り替えます。（ヘッダーは親要素、カットアウトは右下にあるもの、パイプはストラットです）

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

パイプが最初に来て、次にカットアウト、そしてテキストがHTML順になります。

これにより、ページの下部に固定divが配置され、下にスクロールすると下部に固定されます

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

divを別のdivに入れ、親divのスタイルをposition:relative;次に設定します。子divで、次のCSSプロパティを設定します。position:absolute; bottom:0;

テキストの一番下の行だけがブロックの側面に行くのが問題ない場合（完全にその周りとその下にあるのではなく、ブロックを終了して新しいものを開始することなく行うことはできません）、それは親ブロックの下隅の1つにブロックをフロートさせることは不可能ではありません。ブロック内の段落タグにコンテンツを配置し、ブロックの右下隅へのリンクをフロートさせたい場合は、リンクを段落ブロック内に配置し、それをfloat：rightに設定してから、clearでdivタグを挿入します：両方とも段落タグの終わりのすぐ下に設定されます。最後のdivは、親タグがフローティングタグを囲むようにすることです。

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

親要素をposition：relativeとして設定すると、子を最下部の設定position：absoluteに設定できます。そして底：0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

テキストをうまく折り返す場合：-

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

私はこれが古いことを知っていますが、最近この問題に遭遇しました。

絶対位置を使用するdivアドバイスは本当にばかげています。なぜなら、フロート全体が絶対位置でポイントを失うからです。

今、私は普遍的な解決策を見つけることができませんでしたが、多くの場合、一連のスパン要素のように何かを一列に表示するためだけにフローティングdivを適切に使用します。縦にそろえることはできません。

同様の効果を得るには、これを行うことができます。divをフローティングにせず、displayプロパティをに設定しinline-blockます。その後、垂直方向に配置できますが、それでもかまいません。あなただけのセット親のdivのプロパティに必要なvertical-alignのいずれかにtop、bottom、middleまたはbaseline

それが誰かを助けることを願っています

Flexboxの導入により、これはあまりハッキングすることなく非常に簡単になりました。align-self: flex-end子要素上で、交差軸に沿って配置します。

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

出力：

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

私もこの解決策を長い間見つけていました。これは私が得るものです：

align-self：flex-end;

リンク：https : //philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ しかし、このリンクをどこから開いたかを思い出せません。それが役に立てば幸い

私はテーブルを作るだけです。

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

そしてCSS：

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

実際に見る：http :
//jsfiddle.net/mLphM/1/

私はこれらのテクニックのいくつかを試してみましたが、以下はうまくいきました、それで他のすべてが失敗した場合、それは私のために働いたのでこれを試してください:)

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

@ dave-kokのこのアプローチを選択しました。ただし、スクロールせずにコンテンツ全体が適合する場合にのみ機能します。誰かが改善してくれるかどうか私は感謝します

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

ここにコード http://jsfiddle.net/d9t9joh2/

これは、フレックスボックスで可能になりました。親divの「display」を「flex」に設定し、「margin-top」プロパティを「auto」に設定するだけです。これは両方のdivのプロパティを歪めません。

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

確かではありませんが、子divで絶対位置ではなく相対位置を使用すると、以前に投稿されたシナリオが機能するように見えました。

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

そして、テーブルはありません...！

相対配置が必要で、DIVがまだ希望どおりにならない場合は、テーブルを使用して、コンテンツを下に配置するセルでvalign = "bottom"を設定します。DIVはテーブルを置き換えることになっているので、それはあなたの質問への良い答えではないことを知っていますが、これは私が最近イメージキャプションで実行しなければならなかったものであり、これまでのところ問題なく機能しています。

以前に投稿したこのシナリオも試しました。

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

絶対配置では、ページの読み込み時にdivがブラウザーの最下部に固定されますが、ページが長い場合、下にスクロールすると、スクロールされません。相対的な位置に変更しましたが、完璧に機能します。divはロード時に真っ直ぐ下に行きますので、底に着くまで実際には見えません。

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

興味深いアプローチの1つは、いくつかの右フロート要素を互いに積み重ねることです。

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

唯一の問題は、ボックスの高さがわかっている場合にのみ機能することです。

Stuの答えはこれまでの作業に最も近いものですが、テキストの折り返し方に基づいて、外側のdivの高さが変わる可能性があるという事実は考慮されていません。したがって、内側のdivを（「パイプ」の高さを変更することによって）再配置するのは1回だけでは不十分です。この変更はループ内で発生する必要があるため、正しい位置に到達したかどうかを継続的に確認し、必要に応じて再調整できます。

前の回答のCSSはまだ完全に有効です。

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

ただし、JavaScriptは次のようになります。

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

私はそれが非常に古いスレッドであることを知っていますが、それでも答えたいと思います。誰かが以下のCSSとHTMLに従っている場合、それは動作します。子フッターのdivは接着剤のように下に貼り付けられます。

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

margin-topコンテナーの下部にフッターを設定する目的でcss プロパティを使用するには、また、css text-align-lastプロパティを使用し てフッターのコンテンツを中央に設定します。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

ああ、若者たち...ここにいる：

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

絶対位置はありません！レスポンシブ！古い学校

かなり古い質問ですが、それでも...次のようにdivをページの下部にフロートできます。

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

魔法がどこで起こるかを見ることができます。親divの下部にフローティングする場合も同じようにできると思います。

シンプル... htmlファイルの右側に...下部に「フッター」（または下部に必要なdiv）があります。だからこれをしないでください：

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

これを実行してください（フッターを下に置きます）。

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

これを行った後、CSSファイルに移動して、「サイドバー」を左にフロートさせることができます。次に、「コンテンツ」を右にフロートさせ、次に「フッター」を両方クリアします。

これでうまくいくはずです。

position:absolute; bottom:0;CSS内のdiv IDに追加することで、これを最初の試行で機能させることができました。親スタイルは追加しませんでしたposition:relative;。

FirefoxとIE 8の両方で完璧に動作し、IE 7ではまだ試していません。

別の答えは、テーブルと行スパンの賢明な使用です。前の行のすべてのテーブルセル（メインコンテンツのセルを除く）をrowspan = "2"に設定すると、メインテーブルセルの下部に常に1つのセルホールがあり、常にvalign = "bottom"を配置できます。

高さを1行に必要な最小値に設定することもできます。したがって、残りのテキストが占めるスペースに関係なく、常に一番下の行にお気に入りのテキストが表示されます。

私はすべてのdivの答えを試しましたが、私が彼らに必要なことをさせることができませんでした。

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

これが私の解決策です：

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

1px幅の空の要素を使用して、それをフローティングにしてみてください。次に、実際に配置する要素をクリアし、空の要素の高さを使用して、要素が下に行く距離を制御します。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}