Làm thế nào để tôi có một div nổi xuống đáy thùng chứa của nó?

Tôi đã làm nổi hình ảnh và các hộp chèn ở đầu một thùng chứa bằng cách sử dụng float: phải (hoặc trái) nhiều lần. Gần đây, tôi thấy cần phải nổi một div ở góc dưới bên phải của một div khác với gói văn bản thông thường mà bạn nhận được bằng float (văn bản được bao bọc ở trên và bên trái).

Tôi nghĩ rằng điều này phải tương đối dễ dàng mặc dù float không có giá trị dưới cùng nhưng tôi đã không thể thực hiện được bằng cách sử dụng một số kỹ thuật và tìm kiếm trên web không đưa ra bất kỳ điều gì ngoài việc sử dụng định vị tuyệt đối nhưng điều này không đưa ra các hành vi bọc từ chính xác.

Tôi đã nghĩ rằng đây sẽ là một thiết kế rất phổ biến nhưng dường như nó không phải là. Nếu không ai có gợi ý tôi sẽ phải chia văn bản của mình thành các hộp riêng biệt và căn chỉnh div theo cách thủ công nhưng điều đó khá bấp bênh và tôi ghét phải làm điều đó trên mỗi trang cần nó.

EDIT: Chỉ là một lưu ý cho bất cứ ai đến đây. Câu hỏi được liên kết ở trên như một bản sao trên thực tế không phải là một bản sao. Yêu cầu mà văn bản bao quanh phần tử chèn làm cho nó hoàn toàn khác nhau. Trong thực tế, câu trả lời cho câu trả lời được bình chọn hàng đầu ở đây cho thấy rõ lý do tại sao câu trả lời trong câu hỏi được liên kết là sai khi trả lời câu hỏi này. Dù sao, vẫn không có vẻ là một giải pháp chung cho vấn đề này, nhưng một số giải pháp được đăng ở đây và trong câu hỏi được liên kết có thể hoạt động cho các trường hợp cụ thể.

Đặt div cha thành position: relative, sau đó div bên trong thành ...

position: absolute; 
bottom: 0;

...Và ở đó bạn đi :)

Một cách để làm cho nó hoạt động là như sau:

• Làm nổi các yếu tố của bạn như bình thường

• Xoay div cha 180 độ bằng cách sử dụng

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

  Mã nguồn: http://jsfiddle.net/wcneY/

• Bây giờ xoay tất cả các phần tử nổi bên trái (cung cấp cho chúng một lớp) 180 độ để đặt chúng thẳng trở lại. Voila! chúng trôi xuống đáy.

Sau khi vật lộn với các kỹ thuật khác nhau trong một vài ngày, tôi phải nói rằng điều này dường như là không thể. Ngay cả khi sử dụng javascript (điều mà tôi không muốn làm) dường như không thể.

Để làm rõ cho những người có thể chưa hiểu - đây là điều tôi đang tìm kiếm: trong xuất bản, việc bố trí một hình nhỏ (hình ảnh, bảng, hình, v.v.) sao cho dòng dưới cùng của nó nằm dưới cùng của phần cuối cùng dòng văn bản của một khối (hoặc trang) với văn bản chảy xung quanh hình nhỏ theo cách tự nhiên ở trên và bên phải hoặc bên trái tùy thuộc vào phía nào của trang được đặt. Trong html / css, việc sử dụng kiểu float để sắp xếp đỉnh của một hình nhỏ với đỉnh của một khối nhưng thật ngạc nhiên là dường như không thể xếp hàng dưới cùng của văn bản và mặc dù đó là một tác vụ bố cục phổ biến .

Tôi đoán tôi sẽ phải xem lại các mục tiêu thiết kế cho mặt hàng này trừ khi có ai có đề xuất vào phút cuối.

Tôi đã đạt được điều này trong JQuery bằng cách đặt phần tử thanh chống có độ rộng bằng 0 bên trên phao bên phải, sau đó định cỡ thanh chống (hoặc ống) theo chiều cao của cha mẹ trừ đi chiều cao của con.

Trước khi js khởi động, tôi đang sử dụng phương pháp tiếp cận vị trí tuyệt đối, hoạt động nhưng cho phép dòng văn bản phía sau. Vì vậy, tôi chuyển sang vị trí tĩnh để cho phép tiếp cận thanh chống. (tiêu đề là phần tử cha, cutout là phần tôi muốn ở dưới cùng bên phải và pipe là thanh chống của tôi)

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

}

Các đường ống phải đến 1, sau đó là cutout, sau đó là văn bản theo thứ tự HTML.

Điều này đặt một div cố định ở dưới cùng của trang và sửa xuống dưới cùng khi bạn cuộn xuống

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

Đặt div trong div khác và đặt kiểu của div cha thành position:relative;Then trên div con đặt các thuộc tính CSS sau:position:absolute; bottom:0;

Nếu bạn ổn chỉ với dòng văn bản dưới cùng ở bên cạnh khối (trái ngược với hoàn toàn xung quanh và bên dưới nó, bạn không thể làm gì nếu không kết thúc khối và bắt đầu một khối mới), đó là không thể nổi một khối đến một trong các góc dưới cùng của khối cha. Nếu bạn đặt một số nội dung trong thẻ đoạn văn trong một khối và muốn thả liên kết đến góc dưới bên phải của khối, hãy đặt liên kết trong khối đoạn văn và đặt thành dấu phẩy: phải, sau đó đặt vào thẻ div rõ ràng : cả hai được đặt ngay bên dưới phần cuối của thẻ đoạn văn. Div cuối cùng là đảm bảo thẻ cha bao quanh các thẻ nổi.

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

Nếu bạn đặt phần tử cha là vị trí: tương đối, bạn có thể đặt phần tử con ở vị trí cài đặt dưới cùng: tuyệt đối; và đáy: 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>
  

Nếu bạn muốn văn bản được bao bọc độc đáo: -

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

Tôi biết rằng công cụ này đã cũ, nhưng gần đây tôi đã gặp phải vấn đề này.

sử dụng div vị trí tuyệt đối lời khuyên là thực sự ngớ ngẩn, bởi vì toàn bộ điều nổi loại mất điểm với vị trí tuyệt đối ..

Bây giờ, tôi không tìm thấy một giải pháp phổ quát, nhưng trong nhiều trường hợp, prople sử dụng div nổi chỉ để hiển thị một cái gì đó liên tiếp, giống như một loạt các yếu tố nhịp. và bạn không thể căn chỉnh theo chiều dọc.

để đạt được hiệu ứng tương tự, bạn có thể làm điều này: không tạo div float, nhưng đặt thuộc tính hiển thị của nó thành inline-block. sau đó bạn có thể căn chỉnh nó theo chiều dọc tuy nhiên nó làm bạn hài lòng. bạn chỉ cần sở hữu div bộ cha mẹ của vertical-alignmột trong hai top, bottom, middlehoặcbaseline

tôi hy vọng điều đó sẽ giúp được ai đó

Với sự ra đời của Flexbox , điều này đã trở nên khá dễ dàng mà không cần hack nhiều. align-self: flex-endtrên phần tử con sẽ căn chỉnh nó dọc theo trục chéo .

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

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

Đầu ra:

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

Tôi đã tìm thấy giải pháp này trong một thời gian dài là tốt. Đây là những gì tôi nhận được:

align-self: flex-end;

link: https://philipwalton.github.io/solve-by-flexbox/demos/vertical-centering/ Tuy nhiên, tôi không thể nhớ nơi tôi đã mở liên kết này. Hy vọng nó giúp

Tôi sẽ chỉ làm một cái bàn.

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

Và CSS:

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

Xem nó trong hành động:
http://jsfiddle.net/mLphM/1/

Tôi đã thử một vài trong số các kỹ thuật này và những cách sau đây có hiệu quả với tôi, vì vậy nếu tất cả các kỹ thuật khác ở đây nếu thất bại thì hãy thử nó vì nó hiệu quả với tôi :).

<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 đã chọn cách tiếp cận này của @ dave-kok. Nhưng nó chỉ hoạt động nếu toàn bộ nội dung phù hợp mà không cuộn. Tôi đánh giá cao nếu ai đó sẽ cải thiện

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

Đây là mã http://jsfiddle.net/d9t9joh2/

Điều này bây giờ có thể với hộp flex. Chỉ cần đặt 'hiển thị' của div cha là 'flex' và đặt thuộc tính 'lề trên cùng' thành 'tự động'. Điều này không làm biến dạng bất kỳ tài sản của cả 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>

Không chắc chắn, nhưng một kịch bản được đăng trước đó dường như hoạt động nếu bạn sử dụng vị trí: tương đối thay vì tuyệt đối trên div con.

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

Và không có bàn ...!

Nếu bạn cần căn chỉnh tương đối và DIV vẫn không cung cấp cho bạn những gì bạn muốn, chỉ cần sử dụng bảng và đặt valign = "bottom" trong ô bạn muốn nội dung được căn chỉnh xuống dưới cùng. Tôi biết đó không phải là một câu trả lời tuyệt vời cho câu hỏi của bạn vì DIV được cho là thay thế các bảng, nhưng đây là điều tôi phải làm gần đây với chú thích hình ảnh và cho đến nay nó vẫn hoạt động hoàn hảo.

Tôi cũng đã thử kịch bản này được đăng trước đó;

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

Định vị tuyệt đối sửa lỗi div ở phần thấp nhất của trình duyệt khi tải trang, nhưng khi bạn cuộn xuống nếu trang dài hơn thì nó không cuộn với bạn. Tôi đã thay đổi định vị thành tương đối và nó hoạt động hoàn hảo. Các div đi thẳng xuống dưới cùng khi tải để bạn thực sự không nhìn thấy nó cho đến khi bạn xuống đến đáy.

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

Một cách tiếp cận thú vị là xếp chồng một vài yếu tố nổi bên phải lên nhau.

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

Vấn đề duy nhất là nó chỉ hoạt động khi bạn biết chiều cao của hộp.

Câu trả lời của Stu là gần nhất để làm việc cho đến nay, nhưng nó vẫn không tính đến thực tế là chiều cao của div bên ngoài của bạn có thể thay đổi, dựa trên cách văn bản bao bọc bên trong nó. Vì vậy, việc định vị lại div bên trong (bằng cách thay đổi chiều cao của "ống") chỉ một lần sẽ không đủ. Sự thay đổi đó phải xảy ra bên trong một vòng lặp, vì vậy bạn có thể liên tục kiểm tra xem bạn đã đạt được định vị đúng chưa và điều chỉnh lại nếu cần.

CSS từ câu trả lời trước vẫn hoàn toàn hợp lệ:

#outer {
    position: relative; 
}

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

.pipe {
    width:0px; 
    float:right

}

Tuy nhiên, Javascript sẽ trông giống như thế này:

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

Tôi biết đó là một chủ đề rất cũ nhưng tôi vẫn muốn trả lời. Nếu bất cứ ai làm theo css & html dưới đây thì nó hoạt động. Div chân trang con sẽ dính với đáy như keo.

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

Để sử dụng thuộc tính css margin-topvới mục đích đặt chân trang xuống dưới cùng của container. Và để sử dụng thuộc tính css text-align-lastđể đặt nội dung chân trang ở giữa.

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

Oh, các bạn trẻ .... Đây là:

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

Không có vị trí tuyệt đối! Phản ứng nhanh nhẹn! Trường cũ

Câu hỏi khá cũ, nhưng vẫn ... Bạn có thể thả một div xuống cuối trang như thế này:

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

Bạn có thể thấy nơi phép màu xảy ra. Tôi nghĩ bạn có thể làm tương tự để thả nó xuống đáy của div cha.

đơn giản ...... trong tệp html ngay .... có "chân trang" (hoặc div bạn muốn ở dưới cùng) ở dưới cùng. Vì vậy, đừng làm điều này:

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

LÀM ĐIỀU NÀY: (có phần chân trang bên dưới.)

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

Sau khi làm điều này, bạn có thể đi đến tập tin css và có "sidebar" nổi bên trái. sau đó có "nội dung" nổi bên phải rồi xóa "chân trang" cả hai.

điều đó nên làm việc.did cho tôi.

Tôi đã làm điều này để làm việc trong lần thử đầu tiên bằng cách thêm position:absolute; bottom:0;vào ID div bên trong CSS. Tôi đã không thêm phong cách cha mẹ position:relative;.

Nó hoạt động hoàn hảo trong cả Firefox và IE 8, chưa thử nó trong IE 7.

một câu trả lời thay thế là việc sử dụng hợp lý các bảng và hàng. bằng cách đặt tất cả các ô của bảng trên dòng đặt trước (ngoại trừ nội dung chính một) thành rowspan = "2", bạn sẽ luôn có một lỗ ô ở dưới cùng của ô bảng chính mà bạn luôn có thể đặt valign = "bottom".

Bạn cũng có thể đặt chiều cao của nó là tối thiểu bạn cần cho một dòng. Do đó, bạn sẽ luôn có được dòng văn bản yêu thích của mình ở phía dưới bất kể phần còn lại của văn bản chiếm bao nhiêu.

Tôi đã thử tất cả các câu trả lời div, tôi không thể bắt họ làm những gì tôi cần.

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

đây là giải pháp của tôi:

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

Bạn có thể thử sử dụng một phần tử trống có chiều rộng 1px và thả nổi nó. Sau đó xóa phần tử bạn thực sự muốn định vị và sử dụng chiều cao của phần tử trống để kiểm soát mức độ đi xuống của nó.

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

.invisible {
float: left;  
}

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