float:right(またはleft) を何度も使用して、コンテナーの上部に画像と挿入ボックスを浮かせました。ここで、通常のテキスト ラップを使用してdiv別の右下隅にa をフロートさせる必要があります(テキストは上と左のみにラップされます)。divfloat
float価値はありませんが、これは比較的簡単に違いないと思いましbottomたが、多くの手法を使用してそれを行うことができず、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では、floatスタイルを使用してインセットの上部をブロックの上部に揃えるのは簡単ですが、驚いたことに、一般的なレイアウトタスクであるにもかかわらず、テキストの下部とインセットを揃えることは不可能に見えます。 。
誰かが土壇場で提案をしない限り、私はこのアイテムのデザイン目標を再検討する必要があると思います。
私はフロートの上に幅ゼロのストラット要素を配置し、親の高さからフロートされた子の高さを差し引いた値に従ってストラット (またはパイプ) のサイズを調整することで、JQuery でこれを達成しました。
js が開始される前に、私は位置絶対アプローチを使用しています。そのため、ストラット アプローチを可能にするために、ポジション スタティックに切り替えます。(header は親要素、cutout は右下にある要素、pipe はストラット)
$("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;
親要素を 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>
私も長い間この解決策を見つけていました。これは私が得るものです：
align-self: フレックスエンド;
リンク: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ ただし、このリンクをどこから開いたか思い出せません。それが役に立てば幸い
テキストの一番下の行だけがブロックの側面に移動しても問題ない場合 (ブロックを終了して新しいブロックを開始しないとできない完全にその下にあるのとは対照的に)、それは次のとおりです。親ブロックの下隅の 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>
これが古いことは知っていますが、最近この問題に遭遇しました。
絶対位置divのアドバイスを使用するのは本当にばかげています.float全体が絶対位置でポイントを失うからです..
今、私は普遍的な解決策を見つけられませんでしたが、多くの場合、一連のスパン要素のように、何かを連続して表示するためだけにフローティング div を使用します。それを垂直方向に揃えることはできません。
同様の効果を得るには、これを行うことができます: div をフロートにせず、その表示プロパティを に設定しますinline-block。その後、縦に並べることができますが、それはあなたを喜ばせます。親の div プロパティvertical-alignをtop、bottom、middleまたはbaseline
それが誰かを助けることを願っています
私はこれらのテクニックのいくつかを試しましたが、次の方法でうまくいきました。他のすべてが失敗した場合は、これを試してください:)
<style>
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
bottom:-10;
}
</style>
<div id="footer" >Sportkin - the registry for sport</div>
Aは@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 で絶対ではなくposition: relativeを使用すると、以前に投稿されたシナリオが機能するように見えました。
#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 {
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;
}
相対的な配置が必要で、DIV でまだ目的が得られない場合は、テーブルを使用して、コンテンツを下に配置するセルに valign = "bottom" を設定します。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; }
}
興味深いアプローチの 1 つは、いくつかの右側のフロート要素を互いの上に積み重ねることです。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
唯一の問題は、ボックスの高さがわかっている場合にのみ機能することです。
いくつかの JavaScript を使用して、フロート要素をコンテナーの下部にピン留めすることができましたが、それでもテキスト内でフロートしたままにすることができました。これは、形状の外側などに非常に役立ちます。
浮動要素には、そのコンテナに等しいマージントップが割り当てられ、それ自体の高さが差し引かれます。これによりフロートが保持され、要素がコンテナの下端に押し出され、テキストが要素の下に流れないようになります。
const resizeObserver = new ResizeObserver(entries => {
if(entries.length == 0) return;
const entry = entries[0];
if(!entry.contentRect) return;
const containerHeight = entry.contentRect.height;
const imgHeight = imgElem.height;
const imgOffset = containerHeight - imgHeight;
imgElem.style.marginTop = imgOffset + 'px';
});
const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);
作業例: https://codepen.io/strarsis/pen/QWGXGVy
ResizeObserver と JavaScript の広範なサポートのおかげで、これは非常に信頼できるソリューションのようです。
かなり古い質問ですが、それでも...次のようにdivをページの下部にフロートできます。
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
魔法が起こる場所を見ることができます。親divの一番下に浮かせても同じことができると思います。
ここに私の解決策があります:
<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>
シンプル....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" に設定すると、常に valign="bottom" を配置できるメイン テーブル セルの下部に 1 つのセルの穴ができます。
高さを 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>
幅が 1 ピクセルの空の要素を使用してフローティングすることができます。次に、実際に配置する要素をクリアし、空の要素の高さを使用して、どれだけ下に移動するかを制御します。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
コンテナの下部に要素を配置するには、次を使用します。
div {
position: absolute;
bottom: 0px;
}