ฉันจะได้ div เพื่อลอยไปที่ด้านล่างของคอนเทนเนอร์ได้อย่างไร

ฉันมีภาพลอยและกล่องใส่ที่ด้านบนของภาชนะที่ใช้ลอย: ขวา (หรือซ้าย) หลายครั้ง เมื่อเร็ว ๆ นี้ฉันต้องการที่จะลอย div ที่มุมล่างขวาของ div อื่นด้วยการตัดข้อความธรรมดาที่คุณได้รับด้วย float (ข้อความที่ถูกห่อด้านบนและด้านซ้ายเท่านั้น)

ฉันคิดว่าสิ่งนี้จะค่อนข้างง่ายแม้ว่าการลอยไม่มีค่าต่ำสุด แต่ฉันไม่สามารถทำได้โดยใช้เทคนิคจำนวนมากและการค้นหาเว็บไม่ได้เกิดขึ้นกับสิ่งอื่นนอกจากการใช้การวางตำแหน่งที่แน่นอน แต่สิ่งนี้ไม่ได้ ให้พฤติกรรมการตัดคำที่ถูกต้อง

ฉันคิดว่านี่จะเป็นการออกแบบที่เหมือนกันมาก แต่ดูเหมือนจะไม่ใช่ หากไม่มีใครมีข้อเสนอแนะฉันจะต้องแยกข้อความของฉันออกเป็นกล่องแยกต่างหากและจัดแนว 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 องศาเพื่อทำให้พวกมันตรงอีกครั้ง Voila! พวกมันลอยไปด้านล่าง

หลังจากต่อสู้กับเทคนิคต่าง ๆ สองสามวันฉันต้องบอกว่าสิ่งนี้ดูเหมือนจะเป็นไปไม่ได้ แม้กระทั่งการใช้จาวาสคริปต์ (ซึ่งฉันไม่ต้องการทำ) มันก็ดูเหมือนจะเป็นไปไม่ได้

เพื่อชี้แจงสำหรับผู้ที่อาจไม่เข้าใจ - นี่คือสิ่งที่ฉันกำลังมองหา: ในการเผยแพร่มันเป็นเรื่องธรรมดามากที่จะจัดวางสิ่งที่ใส่เข้าไป (รูปภาพ, ตาราง, ตัวเลข, ฯลฯ ) เพื่อให้เส้นด้านล่างขึ้นกับด้านล่างสุด บรรทัดข้อความของบล็อก (หรือหน้า) ด้วยข้อความที่ไหลรอบ ๆ สิ่งที่ใส่เข้าไปในลักษณะที่เป็นธรรมชาติด้านบนและไปทางขวาหรือซ้ายขึ้นอยู่กับด้านของหน้าของสิ่งที่ใส่อยู่ ใน html / css เป็นเรื่องไม่สำคัญที่จะใช้ลักษณะลอยเพื่อจัดเรียงส่วนบนสุดของสิ่งที่ใส่เข้าไปด้านบนของบล็อก แต่ด้วยความประหลาดใจของฉันมันเป็นไปไม่ได้ที่จะเรียงแถวด้านล่างของข้อความและสิ่งที่ใส่เข้าไป .

ฉันเดาว่าฉันจะต้องกลับมาทบทวนเป้าหมายการออกแบบสำหรับรายการนี้หากไม่มีใครมีข้อเสนอแนะในนาทีสุดท้าย

ฉันได้รับสิ่งนี้ใน JQuery โดยการใส่ส่วน strut ความกว้างเป็นศูนย์เหนือลอยขวาจากนั้นปรับขนาด strut (หรือท่อ) ตามความสูงของผู้ปกครองลบความสูงของเด็ก

ก่อนที่ js เตะฉันกำลังใช้วิธีการตำแหน่งสัมบูรณ์ซึ่งทำงานได้ แต่ยอมให้มีการส่งข้อความด้านหลังได้ ดังนั้นฉันจึงสลับไปที่ตำแหน่งคงที่เพื่อเปิดใช้งานวิธีการ strut (ส่วนหัวเป็นองค์ประกอบหลัก cutout เป็นสิ่งที่ฉันต้องการด้านล่างขวาและไปป์คือ strut ของฉัน)

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

}

ไปป์ต้องมาที่ 1 จากนั้นคัตเอาต์จากนั้นข้อความในลำดับ HTML

นี่เป็นการวาง div ที่ด้านล่างของหน้าและแก้ไขที่ด้านล่างเมื่อคุณเลื่อนลง

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

วาง div ใน div อื่นและตั้งค่าสไตล์ของ parent div เป็นposition:relative;แล้วบน child div ตั้งค่าคุณสมบัติ CSS ต่อไปนี้:position:absolute; bottom:0;

หากคุณโอเคที่มีบรรทัดล่างสุดของข้อความที่จะไปด้านข้างของบล็อก (ซึ่งตรงกันข้ามกับที่อยู่โดยรอบและด้านล่างซึ่งคุณไม่สามารถทำได้โดยไม่ต้องปิดบล็อกและเริ่มใหม่) ไม่สามารถลอยบล็อกหนึ่งในมุมด้านล่างของบล็อกหลัก หากคุณใส่เนื้อหาลงในแท็กวรรคภายในบล็อกและต้องการลอยลิงก์ไปที่มุมขวาล่างของบล็อกให้วางลิงค์ภายในบล็อกย่อหน้าและตั้งค่าให้ลอย: ขวาจากนั้นใส่แท็ก 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>

หากคุณตั้งค่าองค์ประกอบหลักเป็นตำแหน่ง: สัมพันธ์คุณสามารถตั้งค่าลูกให้อยู่ในตำแหน่งการตั้งค่าด้านล่าง: สัมบูรณ์; และด้านล่าง: 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>

ฉันรู้ว่าสิ่งนี้เก่า แต่ฉันเพิ่งพบปัญหานี้

ใช้คำแนะนำdivs ตำแหน่งที่แน่นอนนั้นโง่จริง ๆ เพราะสิ่งที่ลอยทั้งชนิดแพ้จุดกับตำแหน่งที่แน่นอน ..

ตอนนี้ฉันไม่พบวิธีแก้ปัญหาสากล แต่ในกรณีส่วนใหญ่ให้ใช้ divs ลอยตัวเพื่อแสดงบางอย่างในแถวเช่นชุดขององค์ประกอบช่วง และคุณไม่สามารถจัดแนวนั้น

เพื่อให้บรรลุผลที่คล้ายกันที่คุณสามารถทำสิ่งนี้ไม่ได้ทำให้ลอย div 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>

ฉันหาวิธีแก้ปัญหานี้มานานแล้วเช่นกัน นี่คือสิ่งที่ฉันได้รับ:

จัดตำแหน่งตัวเอง: 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>

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/

ตอนนี้เป็นไปได้ด้วยเฟล็กซ์บ็อกซ์ เพียงตั้งค่า 'display' ของ parent div เป็น 'flex' และตั้งค่าคุณสมบัติ 'margin-top' เป็น 'auto' สิ่งนี้ไม่ได้บิดเบือนทรัพย์สินใด ๆ ของทั้งสองฝ่าย

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

ไม่แน่ใจ แต่สถานการณ์ที่โพสต์ไว้ก่อนหน้านี้ดูเหมือนว่าจะทำงานได้ถ้าคุณใช้position: relativeแทนที่จะเป็นสัมบูรณ์ใน 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 {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

วิธีการหนึ่งที่น่าสนใจคือการจัดวางองค์ประกอบลอยตัวสองสามตัวไว้ด้านบนของกันและกัน

<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 ภายใน (โดยการเปลี่ยนความสูงของ "pipe") เพียงครั้งเดียวจะไม่เพียงพอ การเปลี่ยนแปลงนั้นจะต้องเกิดขึ้นภายในวงดังนั้นคุณสามารถตรวจสอบอย่างต่อเนื่องว่าคุณได้ตำแหน่งที่ถูกต้องหรือไม่และปรับใหม่หากจำเป็น

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 โดยมีวัตถุประสงค์เพื่อตั้งส่วนท้ายให้อยู่ด้านล่างของคอนเทนเนอร์ และใช้text-align-lastคุณสมบัติcss เพื่อกำหนดเนื้อหาท้ายกระดาษที่กึ่งกลาง

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

ง่าย ...... ในไฟล์ 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;รหัส div ภายใน CSS ฉันไม่ได้เพิ่มสไตล์ผู้ปกครองposition:relative;ฉันไม่ได้เพิ่มรูปแบบการปกครอง

มันใช้งานได้ดีทั้งใน Firefox และ IE 8 ยังไม่ได้ลองใน IE 7 เลย

คำตอบอื่นคือการใช้ตารางและแถวอย่างรอบคอบ โดยการตั้งค่าเซลล์ตารางทั้งหมดในบรรทัดนำหน้า (ยกเว้นเนื้อหาหลักหนึ่ง) เป็น rowspan = "2" คุณจะได้รับหนึ่งช่องเซลล์ที่ด้านล่างของเซลล์ตารางหลักของคุณที่คุณสามารถใส่ valign = "bottom"

นอกจากนี้คุณยังสามารถกำหนดความสูงให้ต่ำสุดที่คุณต้องการสำหรับหนึ่งบรรทัด ดังนั้นคุณจะได้รับบรรทัดข้อความที่คุณชื่นชอบที่ด้านล่างเสมอโดยไม่คำนึงถึงพื้นที่ว่างที่เหลือของข้อความ

ฉันลองตอบคำถาม 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;
}