html - কিভাবে নীচে একটি div বিষয়বস্তু সারিবদ্ধ?




css vertical-alignment (16)

বলুন আমার নিম্নলিখিত সিএসএস এবং এইচটিএমএল কোড আছে:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

হেডার সেকশন নির্দিষ্ট উচ্চতা, কিন্তু শিরোনাম কন্টেন্ট পরিবর্তন হতে পারে। শিরোনাম বিভাগের নীচে উল্লম্বভাবে সংলগ্ন করা শিরোনামের সামগ্রীটি আমি চাই, তাই শিরোনাম বিভাগের নীচে "লাইক" এর শেষ লাইনটি।

তাই যদি পাঠ্যের শুধুমাত্র একটি লাইন থাকে তবে এটি হবে:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

এবং যদি তিনটি লাইন ছিল:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

কিভাবে এই সিএসএস করা যাবে?


2015 সমাধান

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

আপনার স্বাগত


আপনি legacy ব্রাউজার সম্পর্কে চিন্তিত না হন তাহলে একটি flexbox ব্যবহার করুন।

অভিভাবক উপাদান তার প্রদর্শন টাইপ ফ্লেক্স সেট প্রয়োজন

div.parent {
  display: flex;
  height: 100%;
}

তারপরে আপনি সন্তানের উপাদানটি সারিবদ্ধ-স্বটিকে ফ্লেক্স-এ সেট করুন।

span.child {
  display: inline-block;
  align-self: flex-end;
}

এখানে আমি শিখতে ব্যবহৃত সম্পদ: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


আপনি সহজেই ফ্লেক্স অর্জন করতে পারেন

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>


আপেক্ষিক + পরম অবস্থান আপনার সেরা বাজি:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

কিন্তু আপনি যে সমস্যা সঙ্গে চালানো হতে পারে। যখন আমি এটি চেষ্টা করেছিলাম তখন আমি সামগ্রী নীচে প্রদর্শিত ড্রপডাউন মেনুগুলির সমস্যাগুলি ছিলাম। এটা ঠিক সুন্দর না।

আন্তরিকভাবে, উল্লম্ব কেন্দ্রিক সমস্যাগুলির জন্য এবং, ভাল, আইটেমগুলির সাথে যেকোন উল্লম্ব সারিবদ্ধ সমস্যাগুলি স্থির নয়, এটি কেবল টেবিলগুলি ব্যবহার করা সহজ।

উদাহরণ: আপনি টেবিল ব্যবহার না করে এই এইচটিএমএল বিন্যাস করতে পারেন?


আমি এই বৈশিষ্ট্য ব্যবহার করে এবং এটি কাজ করে!

#header {
  display: table-cell;
  vertical-align: bottom;
}

আমি জানি এটি 2 বছরের বেশি, কিন্তু আমি এমন একটি উপায় তৈরি করেছি যা উল্লেখ করা হয়েছে তার থেকে অনেক সহজ।

শিরোনাম div উচ্চতা সেট করুন। তারপর যে ভিতরে, আপনার এইচ 1 ট্যাগ শৈলী নিম্নরূপ:

float: left;
padding: 90px 10px 11px

আমি একটি ক্লায়েন্টের জন্য একটি সাইটে কাজ করছি, এবং নকশাটি একটি নির্দিষ্ট ডিভিটির নীচে থাকা পাঠ্যটির প্রয়োজন। আমি এই দুটি লাইন ব্যবহার করে ফলাফল অর্জন করেছি এবং এটি জরিমানা কাজ করে। এছাড়াও, পাঠ্য প্রসারিত হলে, প্যাডিং এখনও একই থাকবে।


একটি খুব সহজ, এক-লাইন সমাধান, ডিভিকে লাইন-হিগ্থ যুক্ত করতে হয়, মনে রাখবেন যে সমস্ত ডিভ এর পাঠ নীচে চলে যাবে।

সিএসএস:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

এইচটিএমএল:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

মনে রাখবেন যে এটি একটি বাস্তব এবং দ্রুত সমাধান, যখন আপনি কেবল ডিভির ভিতরে পাঠ্য চাইবেন, চিত্রগুলি এবং উপাদানগুলিকে একত্রিত করতে হলে আপনাকে আরও জটিল এবং প্রতিক্রিয়াশীল CSS কোড করতে হবে।


একটি নিখুঁত ক্রস ব্রাউজার উদাহরণ সম্ভবত এই এক এখানে:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

ধারণা নীচে div এবং DIV প্রদর্শন করতে উভয় এটি আছে। প্রায়শই সহজ পদ্ধতিটি মূল বিষয়বস্তু সহ স্টিকি ডিভ স্ক্রোল করে।

অনুসরণ একটি সম্পূর্ণরূপে কাজ সংক্ষিপ্ত উদাহরণ। নোট এম্বেডিং কৌশল প্রয়োজন নেই যে নোট করুন। অনেক BRS শুধু একটি স্ক্রলবার প্রদর্শিত করতে বাধ্য করা হয়:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

আপনি যদি মনে করেন যে আপনার কোডটি IE তে কাজ নাও করতে পারে তবে উপরের দিকের DOCTYPE ট্যাগ যোগ করতে মনে রাখবেন। এটা IE এ কাজ করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এছাড়াও, এটি প্রথম ট্যাগ হওয়া উচিত এবং এর উপরে কিছুই উপস্থিত হওয়া উচিত নয়।


এখানে এটা করতে flexy উপায়। অবশ্যই, এটি IE8 দ্বারা সমর্থিত নয়, ব্যবহারকারী হিসাবে 7 বছর আগে প্রয়োজন। আপনি সমর্থন করার প্রয়োজন কি উপর নির্ভর করে, এই কিছু দূরে সঙ্গে করা যেতে পারে।

তবুও, যদি বাইরের কন্টেইনার ছাড়াই এটি করার উপায় থাকে তবে এটি চমৎকার হবে, কেবল নিজের নিজস্ব পাঠের মধ্যেই পাঠ্যটি আলগা করুন।

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

এটি করতে আধুনিক উপায় flexbox ব্যবহার করা flexbox । নীচের উদাহরণ দেখুন। আপনি কোনও HTML টি ট্যাগে Some text... পাঠ্যও মোড়ানোও প্রয়োজন না, কারণ একটি ফ্লেক্স কন্টেইনারে সরাসরি লেখা পাঠ্যটি একটি বেনামী ফ্লেক্স আইটেমে মোড়ানো হয়।

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

যদি শুধুমাত্র কিছু পাঠ্য থাকে এবং আপনি কন্টেইনারের নীচে উল্লম্বভাবে সারিবদ্ধ করতে চান।

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


কাজ করা বলে মনে হচ্ছে:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

কম ব্যবহার করে সিএসএস পজিশনগুলিকে অনেক বেশি কোডিংয়ের মতো করে তোলে ... আমি কেবল সিএসএস ভালোবাসি। এটি একটি আসল পরিতোষ যখন আপনি সমগ্র লেআউটটি পরিবর্তন করতে পারেন (এটি ভঙ্গ করে :) শুধুমাত্র একটি প্যারামিটার পরিবর্তন করে।


কিছু সময়ের জন্য এই একই সমস্যা নিয়ে সংগ্রাম করার পর, আমি পরিশেষে একটি সমাধান খুঁজে বের করেছিলাম যা আমার সমস্ত প্রয়োজনীয়তা পূরণ করে:

  • আমি ধারক এর উচ্চতা প্রয়োজন যে প্রয়োজন হয় না।
  • আপেক্ষিক + পরম সমাধানগুলির বিপরীতে, সামগ্রীটি তার নিজের স্তরটিতে ভাসে না (অর্থাত এটি কনটেইনার ডিভিতে সাধারণত যুক্ত থাকে)।
  • ব্রাউজার জুড়ে কাজ করে (IE8 +)।
  • বাস্তবায়ন সহজ।

সমাধানটি মাত্র একটি <div> নেয়, যা আমি "অ্যালাইনার" বলে ডাকি:

সিএসএস

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

এইচটিএমএল

<div class="bottom_aligner"></div>
... Your content here ...

এই কৌশল একটি লম্বা, চর্মসার div তৈরি করে কাজ করে, যা ধারক নীচে মূল ভিত্তিরেখা pushs।

এখানে একটি সম্পূর্ণ উদাহরণ যা OP কী জিজ্ঞাসা করে তা অর্জন করে। আমি শুধুমাত্র "নিরীক্ষণ_দৈর্ঘ্য" পুরু এবং লাল প্রদর্শনের উদ্দেশ্যে লাল করেছি।

সিএসএস:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

এইচটিএমএল:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>


যদি আপনার একাধিক, গতিশীল উচ্চতা আইটেম থাকে, তবে সিএসএস প্রদর্শনের মানগুলি টেবিল এবং টেবিল-সেল ব্যবহার করুন:

এইচটিএমএল

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

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

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


যদি আপনি বিষয়বস্তুটির মোড়ানো অংশটির উচ্চতা সেট করতে পারেন (# শিরোনাম-সামগ্রীটি অন্যের উত্তরে দেখানো হয়), পরিবর্তে সম্পূর্ণ # হেডারের পরিবর্তে, আপনি এই পদ্ধতিটিও চেষ্টা করতে পারেন:

এইচটিএমএল

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

সিএসএস

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

codepen উপর প্রদর্শন


সিএসএস পজিশনিং ব্যবহার করুন।

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

cletus উল্লেখ হিসাবে, আপনি এই কাজ করতে হেডার-বিষয়বস্তু সনাক্ত করা প্রয়োজন।

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div> 

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>





vertical-alignment