ডিআইভি'র নীচে বা বেসলাইনে সারিবদ্ধ করুন

Question 1

আমি পিতা-মাতৃ ডিভ ট্যাগের নীচে বা বেসলাইনে একটি শিশু ডিভ ট্যাগ সারিবদ্ধ করার চেষ্টা করছি।

আমি কেবল যা করতে চাই তা হল পিতামাতার ডিভের বেসলাইনে শিশু ডিভ করা, এটি এখন দেখতে যা দেখাচ্ছে তা এখানে:

এইচটিএমএল

<div id="parentDiv">
<div class="childDiv"></div>
</div>

সিএসএস

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

বিঃদ্রঃ

childDivবিভিন্ন উচ্চতা সহ আমার একাধিক গুলি থাকবে এবং বেসলাইন / নীচে সারিবদ্ধ হওয়ার জন্য আমার এগুলি সমস্ত প্রয়োজন।

Question 2

আপনার এটি যুক্ত করতে হবে:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

absoluteউপাদান ঘোষণা করার সময় , এটি তার নিকটতম পিতামাতার অনুসারে অবস্থিত যা তা নয় static(এটি অবশ্যই হবে absolute, relativeবা fixed)।

Question 3

সাত বছর পরে উল্লম্ব সারিবদ্ধ অনুসন্ধানগুলি এখনও এই প্রশ্নটি নিয়ে আসে, সুতরাং আমি এখন আমাদের কাছে উপলভ্য থাকা আরও একটি সমাধান পোস্ট করব: ফ্লেক্সবক্স অবস্থান। সবেমাত্র পিতামাত্ত্বিক ডিভেরdisplay:flex; justify-content: flex-end; flex-direction: column উপর সেট করুন ( পাশাপাশি এই ফিডলে প্রদর্শিত হবে ):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

Question 4

টেবিল এবং টেবিল-কক্ষের CSS প্রদর্শন মানগুলি ব্যবহার করুন:

এইচটিএমএল

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

সিএসএস

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

আমি এখানে একটি জেএসবিন ডেমো তৈরি করেছি: http://jsbin.com/INOnAkuF/2/edit

ডেমোতেও একই কৌশল ব্যবহার করে উল্লম্বভাবে কেন্দ্র বিন্যস্ত করার একটি উদাহরণ রয়েছে।

Question 5

এটি কাজ করে (আমি কেবল পরীক্ষিত অর্থাত্ & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

আশা করি এইটি কাজ করবে.

Question 6

ওয়াই শোহমের পোস্ট করা উত্তর (নিখুঁত অবস্থান ব্যবহার করে) বেশিরভাগ ক্ষেত্রেই ধারকটি একটি নির্দিষ্ট উচ্চতা হ'ল সহজ সমাধান বলে মনে হয় তবে পিতামাতার ডিআইভিতে যদি একাধিক ডিআইভি এবং স্বয়ংক্রিয়ভাবে গতিশীল সামগ্রীর উপর ভিত্তি করে এর উচ্চতা সমন্বয় করতে হয় তবে সমস্যা হতে পারে আমার গতিশীল কন্টেন্টের দুটি ব্লক থাকা দরকার; একটি কনটেইনার শীর্ষে এবং একের নীচে প্রান্তিককরণ এবং যদিও আমি পাত্রে শীর্ষ ডিআইভি আকারের সাথে সামঞ্জস্য করতে পারতাম, ডিআইভি নীচের দিকে প্রান্তিক হয়, তবে এটি ধারকটির আকার পরিবর্তন করবে না তবে বাইরে প্রসারিত হবে । টেবিল শৈলীর অবস্থান ব্যবহার করে রমিমে উপরে বর্ণিত পদ্ধতিটি যদিও আরও জটিল, তবে এই ক্ষেত্রে আরও দৃust় এবং কনটেইনারটির নীচে এবং সঠিক অটো উচ্চতায় প্রান্তিককরণের অনুমতি দেওয়া হয়েছে।

সিএসএস

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

এইচটিএমএল

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

আমি বুঝতে পারি এটি কোনও নতুন উত্তর নয় তবে আমি এই পদ্ধতির উপর মন্তব্য করতে চেয়েছি কারণ এটি আমার সমাধানটি সন্ধান করতে পারে তবে নবাগত হিসাবে আমাকে মন্তব্য করার অনুমতি দেওয়া হয়নি, কেবল পোস্ট।

Question 7

আপনি সম্ভবত সন্তানের ডিভ সেট করতে হবে position: absolute।

আপনার সন্তানের শৈলীতে আপডেট করুন

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Question 8

একটি পুরানো পোস্ট তবে ভেবেছিলাম যে কেউ খুঁজছেন তার জন্য একটি উত্তর ভাগ করব। এবং কারণ আপনি যখন absoluteজিনিস ব্যবহার করেন তখন ভুল হতে পারে। আমি কি করব

এইচটিএমএল

<div id="parentDiv"></div>
<div class="childDiv"></div>

সিএসএস

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

এবং এটি ঠিক যে নীচে ডিভ ফিরে আসবে পিতামহী div মধ্যে ব্যাক আপ। বেশিরভাগ ব্রাউজারের জন্যও নিরাপদ

Question 9

আমার অনুরূপ কিছু ছিল এবং কার্যকরভাবে সন্তানের সাথে কিছু প্যাডিং-টপ যুক্ত করে এটি কাজ করতে পেলাম ।

আমি নিশ্চিত যে এখানকার অন্যান্য উত্তরগুলির মধ্যে কিছু সমাধান পেতে পারে তবে আমি এগুলি খুব দীর্ঘ সময় পরে সহজে কাজ করতে পারি না; আমি পরিবর্তে প্যাডিং-টপ সলিউশনটি দিয়ে শেষ করেছি যা এর সরলতায় মার্জিত, তবে আমার কাছে একরকম হাকিশ মনে হয় (এটি যে পিক্সেলের মান সেট করে তা সম্ভবত পিতামাতার উচ্চতার উপর নির্ভর করবে)।

Question 10

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

স্নিপেট প্রসারিত করুন

এটি আমার সমাধান

Question 11

যদি আপনার পিতামাতার ডিভের মধ্যে আপনার একাধিক শিশু ডিভ থাকে তবে আপনি নীচের মতো উল্লম্ব-সারিবদ্ধ সম্পত্তি ব্যবহার করতে পারেন:

.Parent div
{
  vertical-align : bottom;
}