การวางตำแหน่ง div ใกล้ด้านล่างของ div อื่น

102

ฉันมี div ชั้นนอกและ div ชั้นใน ฉันต้องวาง div ด้านในไว้ที่ด้านล่างของด้านนอก

div ด้านนอกยืดหยุ่นได้ (เช่นความกว้าง 70%) ฉันต้องจัดกึ่งกลางบล็อกด้านในด้วย

รูปแบบการแต่งหน้าที่อธิบายไว้อย่างง่ายแสดงอยู่ในภาพด้านล่าง:

ใส่คำอธิบายภาพที่นี่

html css layout

ความสูงยืดหยุ่นด้วยหรือไม่? หากไม่เป็นเช่นนั้นคุณสามารถตั้งค่าระยะขอบสำหรับกล่องด้านในเป็น (outerBoxHeight - innerBoxHeight)

— peirix

@peirix: ใช่ความสูงของบล็อกด้านนอกสามารถเปลี่ยนแปลงได้และเราไม่รู้

— Roman

79

ทดสอบและทำงานบน Firefox 3, Chrome 1 และ IE 6, 7 และ 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

เวอร์ชันสดที่นี่: http://jsfiddle.net/RichieHindle/CresX/

— ริชชี่
แหล่งที่มา

ขอบคุณวิธีแก้ปัญหาของคุณเกือบถูกต้อง ฉันต้องเพิ่ม "// margin-left: -40px" ในรูปแบบของบล็อกสีเขียวสำหรับ IE เท่านั้น หากไม่มีแฮ็กที่มีแอตทริบิวต์ขอบซ้ายบล็อกสีเขียวของคุณจะถูกกำจัดทิ้งใน IE7 ใครช่วยอธิบายได้ไหมว่า 40px นี้มาจากไหน

— โรมัน

IE7 วางตำแหน่ง div สีเขียวในแนวนอนหลังคำว่า "Outer" ฉันได้อัปเดตรหัสเพื่อระบุ "left: 0"

— RichieHindle

13

คุณต้องมี div การตัดสำหรับด้านล่างเพื่อให้จัดกึ่งกลาง

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

— แมกนาร์
แหล่งที่มา

7

CSS3 Flexboxช่วยให้การวางตำแหน่งด้านล่างทำได้ง่ายมาก ตรวจสอบตารางรองรับ Flexbox

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

เอาท์พุต:

แสดงข้อมูลโค้ด

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

ขยายข้อมูลโค้ด

— m4n0
แหล่งที่มา

5

ทำงานได้ดีกับเบราว์เซอร์ทั้งหมดรวมถึง ie6

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

— Dmitri Farkov
แหล่งที่มา

95% สูงสุดไม่เหมือนกับการพูด 10px ด้านล่าง คุณต้องการให้กล่องด้านในยึดที่ด้านล่างเมื่อมีการปรับขนาดหน้าจอ

— user959690