Div'in kabının dibine yüzmesini nasıl sağlarım?

Float kullanarak bir kabın üstündeki görüntüleri ve iç metin kutularını yüzdüm: sağ (veya sol) birçok kez. Son zamanlarda, başka bir div'ın sağ alt köşesinde bir div, float ile aldığınız normal metin sarmasıyla (yalnızca üste ve sola sarılmış metin) yüzmeye ihtiyacım vardı.

Şamandıra alt değeri olmamasına rağmen bunun nispeten kolay olması gerektiğini düşündüm, ancak bir dizi teknik kullanarak bunu yapamadım ve web'de arama yapmak mutlak konumlandırma kullanmaktan başka bir şeyle gelmedi, ancak bu doğru sözcük kaydırma davranışını verir.

Bunun çok yaygın bir tasarım olacağını düşünmüştüm ama görünüşe göre öyle değil. Kimsenin bir önerisi yoksa, metnimi ayrı kutulara ayırıp div'i elle hizalamam gerekecek, ancak bu oldukça güvencesiz ve bunu gerektiren her sayfada yapmaktan nefret ediyorum.

EDIT: Buraya gelen herkes için sadece bir not. Yukarıda kopya olarak bağlantılı soru aslında bir kopya değildir. İç metin öğesinin etrafına metin kaydırma şartı onu tamamen farklı kılar. Aslında, en çok oy alan cevaba verilen yanıt, bağlantılı sorudaki cevabın bu soruya bir cevap olarak neden yanlış olduğunu açıkça ortaya koymaktadır. Her neyse, hala bu soruna genel bir çözüm yok gibi görünüyor, ancak burada ve bağlantılı soruda yayınlanan bazı çözümler belirli durumlar için işe yarayabilir.

Üst div değerini position: relative, ardından iç div değerini ... olarak ayarlayın.

position: absolute; 
bottom: 0;

... ve işte gidiyorsunuz :)

Çalışmasını sağlamanın bir yolu şudur:

• Öğelerinizi normal gibi bırakın

• Üst div öğesini kullanarak 180 derece döndürün

  -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/

• Şimdi sola doğru kayan tüm öğeleri (bir sınıf verin) 180 derece döndürün ve tekrar düz tutun. İşte bu kadar! dibe doğru yüzerler.

Birkaç gün boyunca çeşitli tekniklerle mücadele ettikten sonra bunun imkansız göründüğünü söylemeliyim. Javascript kullanarak (ki yapmak istemiyorum) mümkün görünmüyor.

Anlayamamış olanlar için açıklığa kavuşturmak için - bu aradığım şey: yayınlamada, bir iç metin (resim, tablo, şekil vb.) bir bloğun (veya sayfanın) metninin, içerideki sayfanın hangi tarafına bağlı olduğuna bağlı olarak, metnin etrafında doğal bir şekilde yukarı ve sağa veya sola akan metin içeren satır. Html / css'de, bir ekin üstünü bir bloğun üstüyle hizalamak için kayan nokta stilini kullanmak önemsizdir, ancak sürprizime göre, ortak bir düzen görevi olmasına rağmen metnin altını ve iç metini sıralamak imkansız görünüyor. .

Kimsenin son dakika önerisi olmadığı sürece bu öğenin tasarım hedeflerini tekrar gözden geçirmem gerekeceğini tahmin ediyorum.

Bunu JQuery'de şamandıra sağının üstüne sıfır genişlikli dikme elemanı koyarak, sonra dikme (veya boruyu) ebeveyne göre yükselen çocuğun yüksekliğine göre boyutlandırdım.

Js başlamadan önce çalışır ama arkasında metin akışına izin veren konum mutlak yaklaşım kullanıyorum. Bu nedenle payanda yaklaşımını etkinleştirmek için statik konuma geçiyorum. (başlık üst öğe, kesme sağ alt istediğim ve boru benim dikme)

$("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

}

Boru ilk önce gelmeli, daha sonra kesilmeli, ardından HTML düzenindeki metin olmalıdır.

Bu, sayfanın altına sabit bir div yerleştirir ve aşağı kaydırdıkça tabana sabitlenir

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

Div'yi başka bir div öğesine yerleştirin ve üst div stilini position:relative;Sonra olarak ayarlayın. Alt div'de aşağıdaki CSS özelliklerini ayarlayın:position:absolute; bottom:0;

Metnin yalnızca en alt satırının bloğun kenarına gitmesi konusunda iyiyseniz (bloğun bitip yeni bir tane başlatmadan yapamayacağınız, tamamen etrafında ve altında olduğu gibi), bir bloğu ana bloğun alt köşelerinden birine yüzmek imkansız değildir. Bir bloğun içindeki bir paragraf etiketine bir miktar içerik koyar ve bloğun sağ alt köşesine bir bağlantı kaydırmak istiyorsanız, bağlantıyı paragraf bloğunun içine koyun ve float: right olarak ayarlayın, sonra clear ile bir div etiketi yerleştirin : her ikisi de paragraf etiketinin sonunun hemen altına yerleştirilir. Son div, üst etiketin kayan etiketleri çevrelediğinden emin olmaktır.

<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>

Üst öğeyi konum: göreli olarak ayarlarsanız, alt öğeyi alt ayar konumuna ayarlayabilirsiniz: mutlak; ve alt: 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>
  

Metnin güzelce sarılmasını istiyorsanız: -

.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>

Bu şeylerin eski olduğunu biliyorum, ama son zamanlarda bu problemle karşılaştım.

mutlak konum div kullan tavsiye gerçekten saçma, çünkü tüm şamandıra şey tür kaybeder mutlak pozisyonları ile ..

şimdi, evrensel bir çözüm bulamadım, ancak çoğu durumda prople, bir dizi yayılma elemanı gibi bir satırda bir şey görüntülemek için yüzen divleri kullanır. ve bunu dikey olarak hizalayamazsınız.

benzer bir etki elde etmek için bunu yapabilirsiniz: div float yapmayın, ancak display özelliğini olarak ayarlayın inline-block. o zaman dikey olarak hizalayabilirsiniz, ancak sizi memnun eder. Sadece set ebeveynin div özelliğine ihtiyaç vertical-alignbirine top, bottom, middleveyabaseline

umarım bu birine yardım eder

Flexbox'ın piyasaya sürülmesiyle , bu çok fazla saldırı olmadan oldukça kolay hale geldi. align-self: flex-endalt elemanda onu çapraz eksen boyunca hizalar .

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

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

Çıktı:

.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>

Uzun zamandır bu çözümü buldum. Bu ne olsun:

kendini hizala: esnek uç;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Ancak, bu bağlantıyı nereden açtığımı hatırlayamıyorum. Umarım yardımcı olur

Sadece bir masa yapardım.

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

Ve CSS:

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

Uygulamaya bakın:
http://jsfiddle.net/mLphM/1/

Bu tekniklerin birkaçını denedim ve aşağıdakiler benim için çalıştı, bu yüzden eğer burada her şey başarısız olursa, o zaman bunu deneyin çünkü benim için çalıştı :).

<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 yaklaşımını seçti. Ancak yalnızca içeriğin tamamı kaydırılmadan uygunsa çalışır. Birinin gelişip iyileşmeyeceğini takdir ediyorum

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

İşte kodu http://jsfiddle.net/d9t9joh2/

Bu artık esnek kutu ile mümkün. Üst div öğesinin "ekranını" "flex" olarak ayarlayın ve "margin-top" özelliğini "auto" olarak ayarlayın. Bu, div'in hiçbir özelliğini bozmaz.

.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>

Emin değilim, ancak daha önce yayınlanan bir senaryo , div alt konumunda mutlak yerine position: relative kullanırsanız işe yaradı.

#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>

Ve tablo yok ...!

Göreli hizalamaya ihtiyacınız varsa ve DIV'ler hala istediğinizi vermiyorsa, tabloları kullanın ve içeriğin alta hizalanmasını istediğiniz hücrede valign = "bottom" değerini ayarlayın. DIV'lerin tabloları değiştirmesi gerektiğinden, sorunuzun büyük bir cevabı olmadığını biliyorum, ancak son zamanlarda bir resim yazısı ile yapmak zorunda kaldım ve şimdiye kadar kusursuz bir şekilde çalıştı.

Daha önce de yayınlanan bu senaryo denedim;

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

Mutlak konumlandırma, sayfayı yükledikten sonra div'i tarayıcının en alt kısmına sabitler, ancak sayfa daha uzunsa aşağı kaydırdığınızda sizinle kaydırmaz. Konumlandırmayı göreceli olarak değiştirdim ve mükemmel çalışıyor. Div, yükleme sırasında doğrudan dibe gider, böylece dibe ulaşana kadar görmezsiniz.

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

İlginç bir yaklaşım, birkaç sağ şamandıra elemanını üst üste istiflemektir.

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

Tek sorun, bunun yalnızca kutunun yüksekliğini bildiğinizde çalışmasıdır.

Stu'nun cevabı şu ana kadar çalışmaya en yakın olanıdır, ancak yine de metnin içindeki sarma şekline bağlı olarak dış div'inizin yüksekliğinin değişebileceği gerçeğini dikkate almaz. Bu nedenle, iç div değerini ("borunun" yüksekliğini değiştirerek) yalnızca bir kez değiştirmek yeterli olmaz. Bu değişiklik bir döngü içinde gerçekleşmelidir, böylece henüz doğru pozisyonu elde edip etmediğinizi sürekli kontrol edebilir ve gerekirse yeniden ayarlayabilirsiniz.

Önceki yanıtın CSS'si hala mükemmel bir şekilde geçerlidir:

#outer {
    position: relative; 
}

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

.pipe {
    width:0px; 
    float:right

}

Ancak, Javascript daha çok şöyle görünmelidir:

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; }
}

Çok eski bir konu olduğunu biliyorum ama yine de cevaplamak istiyorum. Herkes aşağıdaki css & html izleyin, o zaman çalışır. Çocuk altbilgisi div alt kısım yapıştırıcı gibi yapışacaktır.

<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-topAltbilgiyi kabının altına ayarlamak amacıyla css özelliğini kullanmak . Ve text-align-lastaltbilgi içeriğini merkeze ayarlamak için css özelliğini kullanmak .

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

Oh, gençler .... İşte buradasınız:

<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>

Mutlak konum yok! Duyarlı! Eski okul

Oldukça eski bir soru, ama yine de ... Bir div'ı sayfanın altına şu şekilde aktarabilirsiniz:

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

Büyünün nerede olduğunu görebilirsiniz. Aynı şeyi bir üst divın altına yüzmek için de yapabileceğinizi düşünüyorum.

Basit ...... html dosyasında .... altta "altbilgi" (veya altta istediğiniz div) var. Yani bunu yapma:

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

BUNU YAPIN: (altbilgiyi altına alın.)

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

Bunu yaptıktan sonra css dosyasına gidebilir ve "kenar çubuğu" sola yüzebilir. sonra "içerik" sağa kayar sonra "altbilgi" her ikisini de temizle.

benim için çalışmalı.

Bunu ilk denemede çalışmak position:absolute; bottom:0;için CSS içindeki div kimliğine ekleyerek aldım . Ebeveyn stilini eklemedimposition:relative; .

Hem Firefox hem de IE 8'de mükemmel çalışıyor, IE 7'de henüz denemedim.

alternatif bir cevap ise tabloların ve Rowspan'ın mantıklı kullanımıdır. önceki satırdaki tüm tablo hücrelerini (ana içerik hariç) rowspan = "2" olacak şekilde ayarlayarak, ana tablo hücrenizin altında her zaman valign = "bottom" koyabileceğiniz bir hücre deliği alırsınız.

Yüksekliğini bir satır için gereken minimum değer olarak da ayarlayabilirsiniz. Böylece, metnin geri kalanının ne kadar yer kapladığından bağımsız olarak, en sevdiğiniz metin satırını her zaman en altta bulacaksınız.

Tüm div cevaplarını denedim, onlara ihtiyacım olan şeyi yapmalarını sağlayamadım.

<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>

İşte benim çözüm:

<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>

1 piksel genişliğinde boş bir öğe kullanmayı ve yüzmeyi deneyebilirsiniz. Ardından, gerçekten yerleştirmek istediğiniz öğeyi temizleyin ve boş öğenin yüksekliğini kullanarak ne kadar aşağıya ineceğini kontrol edin.

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

.invisible {
float: left;  
}

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