অন্য ডিভের নীচের দিকে কাছাকাছি একটি ডিভিশন স্থাপন করা

102

আমার বাইরের ডিভ এবং ভিতরের ডিভ আছে। আমার বাইরের দিকের নীচে ভিতরের ডিভ স্থাপন করা উচিত।

বহিরাগত ডিভ স্থিতিস্থাপক (প্রস্থ: উদাহরণস্বরূপ 70%)। আমার ভেতরের ব্লকও দরকার।

বর্ণিত মেক-আপের সহজ মডেলটি নীচের ছবিতে দেখানো হয়েছে:

এখানে চিত্র বর্ণনা লিখুন

html css layout

উচ্চতা এছাড়াও ইলাস্টিক হয়? যদি তা না হয় তবে আপনি অভ্যন্তরীণ বাক্সের জন্য মার্জিন-শীর্ষটি সেট করতে পারেন (আউটারবক্সহাইট - ইনারবক্সহাইট)।

— পিয়ারিক্স

@ পেরিক্স: হ্যাঁ, বাইরের ব্লকের উচ্চতা পরিবর্তন হতে পারে এবং আমরা এটি জানি না

— রোমান

79

ফায়ারফক্স 3, ক্রোম 1 এবং আই 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/

— RichieHindle
সূত্র

ধন্যবাদ, আপনার সমাধানটি প্রায় সঠিক। আইই এর জন্য আমাকে কেবল গ্রিন ব্লকের স্টাইলে "// মার্জিন-বাম: -40px" যুক্ত করতে হয়েছিল। মার্জিন-বাম গুণাবলী সহ এই হ্যাকটি ছাড়াই আপনার গ্রিন ব্লক আইই 7-এ বাম দিকে নিষ্পত্তি হয়েছিল। এই 40px কোথা থেকে এসেছে কেউ ব্যাখ্যা করতে পারেন?

— রোমান

আইই 7 অনুভূমিকভাবে "আউটার" শব্দের পরে সবুজ বর্ণের অবস্থান করছিল। আমি "বাম: 0" নির্দিষ্ট করতে কোড আপডেট করেছি।

— রিচিহিন্ডল

13

এটি কেন্দ্রের জন্য নীচের অংশের জন্য আপনার একটি মোড়কের ডিভি দরকার।

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

— Magnar
সূত্র

7

CSS3 Flexboxনীচে অবস্থানটি খুব সহজেই মঞ্জুরি দেয়। ফ্লেক্সবক্স সমর্থন টেবিলটি পরীক্ষা করুন

এইচটিএমএল

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

সিএসএস

.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

আই 6 সহ সমস্ত ব্রাউজারে ভাল কাজ করে।

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

— দিমিত্রি ফারকভ
সূত্র

শীর্ষ 95% নীচে 10px বলার মতো নয়। আপনি পর্দার আকার পরিবর্তন করার সাথে সাথে অভ্যন্তরীণ বাক্সটি নীচে অ্যাঙ্কর করতে চান।

— ব্যবহারকারী 959690