260


56

float:right(またはleft)を使用してコンテナの上部にイメージと挿入ボックスを何度もフローティングしています。 最近私は別のdivの右下隅にあなたがfloatで得られる通常のテキスト折り返しでテキストを浮動する必要があると思いました(テキストは上と左だけに折り返されます)。

floatは最低値ではないにもかかわらずこれは比較的簡単であるべきだと私は思いましたが、私はいくつかのテクニックを使ってそれを行うことができなかったし、ウェブを検索すること正しい折り返し動作を指定してください。

これは非常に一般的なデザインになるだろうと思っていましたが、どうやらそうではないようです。 だれも私のテキストを別々のボックスに分割してdivを手動で揃える必要があるという提案がない場合、それはかなり不安定です。それを必要とするすべてのページでそれをしなければならないのは嫌です。

*編集:*ここに来た人へのメモ。 重複として上でリンクされた質問は、実際には重複ではありません。 テキストがinset要素を囲むという要件により、完全に異なります。 実際、ここで一番投票された回答に対する回答は、リンクされた質問の回答がこの質問に対する回答として間違っている理由を明らかにしています。 とにかく、この問題に対する一般的な解決策はまだないようですが、ここでおよびリンクされた質問で掲載されている解決策のいくつかは特定のケースでうまくいくかもしれません。

29 Answer


284


親divを `position:relative`に設定し、それから内側のdivを…​に設定します。

position: absolute;
bottom: 0;

…​and there you go :)


73


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

  • あなたの要素を通常通り左に浮かべる

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

-moz-transform:rotate(180度); -webkit-transform:rotate(180度); -o-transform:rotate(180度); -ms-transform:rotate(180度);フィルタ:progid:DXImageTransform.Microsoft.BasicImage(rotation = 2);

JSfiddle:http://jsfiddle.net/wcneY/ * 今度はそれらを再びまっすぐにするために180度左に浮かぶ(それらにクラスを与える)すべての要素を回転させます。 ほら! 彼らは底に浮かぶ。


46


数日間さまざまなテクニックに苦労した後、私はこれが不可能であるように見えると言わざるを得ない。 (私はしたくない)javascriptを使ってもそれは可能ではないようです。

理解していなかったかもしれない人たちを明確にするために - これが私が探しているものです。ブロック(またはページ)のテキスト行で、差し込みがページのどちら側にあるかに応じて、上および右または左に自然な方法で差し込みの周りを流れるテキスト。 html / cssでは、フロートスタイルを使用してインセットの上部をブロックの上部に揃えることは簡単ですが、驚いたことに、テキストの下部を揃えてインセットすることは不可能です。一般的なレイアウト作業ですが。

誰かが最後の提案をしていない限り、私はこのアイテムのデザイン目標を再考しなければならないでしょうと思います。


14


JQueryでは、フロートの真上に幅ゼロのストラット要素を配置し、次に親の高さから浮遊している子供の高さを引いたサイズに従ってストラット(またはパイプ)のサイズを変更することによってこれを実現しました。

jsが始める前は、位置絶対アプローチを使用していました。これは機能しますが、テキストの流れを遅らせることができます。 そのため、ストラットアプローチを有効にするために静的位置に切り替えます。 (headerは親要素、cutoutは右下に欲しいもの、そしてpipeは私の支柱です)

$( "header .pipe")。each(関数(){$(this).next( "。cutout")。css( "position"、 "static"); $(this).height($(this) .parent()。height() -  $(this).next( "。cutout")。height());});

CSS

ヘッダー{位置:相対; }

header img.cutout {float:right;位置:絶対下:0;右:0; clear:right} header .pipe {width:0px;フロート:右

}

パイプは1番目、次にカットアウト、次にHTML順のテキストの順に来る必要があります。


11


これはページの下部に固定divを置き、下にスクロールすると下部に固定されます

#div {left:0;ポジション:固定。 text-align:center。下:0;幅:100%。 }


9


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


4


テキストの一番下の行だけをブロックの横に移動しても問題ない場合(ブロックの最後と新しいテキストを開始しないと実行できない)、それはブロックを親ブロックの下の角の1つに浮かべることは不可能ではありません。 ブロック内の段落タグにコンテンツを配置し、そのブロックの右下隅にリンクを配置する場合は、段落ブロック内にリンクを配置してfloat:rightに設定してから、clearタグを付けてdivタグを配置します。 :どちらも段落タグの末尾のすぐ下に設定します。 最後のdivは、親タグが浮遊タグを囲むようにすることです。

タイトルテキストコンテンツ


3


私はこのものが古いことを知っていますが、私は最近この問題に出くわしました。

絶対位置を使うdivs_アドバイスは本当に馬鹿げています。フロート全体が絶対位置を失うためです。

今、私は普遍的な解決策を見つけることができませんでしたが、多くの場合、一連のspan要素のように、何かを一列に表示するためだけに浮動divを使います。 そして、あなたはそれを垂直に並べることはできません。

同様の効果を得るために、あなたはこれをすることができます:divをフロートにしないで、それをdisplayプロパティを `inline-block`に設定してください。 それからあなたはそれをあなたに喜ばせるけれどもそれを垂直に整列させることができる。 親のdivプロパティ「vertical-align」を「top」、「bottom」、「middle」または「baseline」に設定するだけです。

誰かに役立つことを願っています


3


テキストをきれいに折り返したい場合は、 -

.outer {
  display: table;
}

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

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


2


親要素をposition:relativeに設定した場合、子を一番下の設定位置に設定できます。そして底部:0。

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

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