এর ধারকটির নীচে ভাসতে কীভাবে আমি একটি ডিভি পাই?

Question

আমার কাছে বেশিরভাগ সময় ভাসা: ডান (বা বাম) ব্যবহার করে একটি ধারকের শীর্ষে ভাসমান চিত্র এবং ইনসেট বাক্স রয়েছে। সম্প্রতি আমি অন্য ডিভের নীচে ডান কোণে একটি ডিভিটি ভাসানোর প্রয়োজনীয় চাপ পেয়েছি যা আপনি ভাসমান (যে উপরের অংশে এবং কেবল বামে আবৃত পাঠ্য) দিয়ে পেয়েছেন সেই সাধারণ পাঠ্যের মোড়ক দিয়ে div

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

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

সম্পাদনা: এখানে যে কেউ আসে তার জন্য কেবল একটি নোট। সদৃশ হিসাবে উপরে লিঙ্ক করা প্রশ্নটি আসলে নকল নয়। ইনসেট উপাদানটির চারপাশে পাঠ্য মোড়কের প্রয়োজনীয়তা এটিকে সম্পূর্ণ আলাদা করে তোলে। প্রকৃতপক্ষে, এখানে শীর্ষে ভোট দেওয়া উত্তরের প্রতিক্রিয়া এটি পরিষ্কার করে দিয়েছে যে এই প্রশ্নের উত্তর হিসাবে লিঙ্কযুক্ত প্রশ্নের উত্তর কেন ভুল wrong যাইহোক, এখনও এই সমস্যার কোনও সাধারণ সমাধান বলে মনে হচ্ছে না তবে এখানে পোস্ট করা এবং লিঙ্কযুক্ত প্রশ্নের কয়েকটি সমাধান নির্দিষ্ট ক্ষেত্রে কাজ করতে পারে।

Comments

আমি কীভাবে শীর্ষে কিছুটা ডুবিয়ে ফেলব তা বুঝতে পেরে মাত্র আমি এই "তলদেশে তলদেশে" ইস্যুতে কাজ করব ... ;-)

— Shog9

@ শোগ 9 উপসংহার: সিএসএসের একটি "ডুবুনি" উপাদান দরকার।

— গাইলবার ভাল

এখানে বেশিরভাগ উত্তরগুলি "ডুবে গেছে" উপাদানটির আশেপাশে এবং তার উপরে পাঠ্যের জন্য মোড়কের প্রয়োজনীয়তার বিষয়টি উপেক্ষা করে। তবে স্টু এর উত্তর কাজ করে (জ্যাকুয়েরির সাথে)।

— স্টিভ বেনেট

আমি এটাকে মজাদার দেখছি না, আমি জানতে চাই আপনি কীভাবে প্রথমে বাস্তব জীবনে ডান বা বাম দিকে ভাসতে পরিচালনা করেন .... এটি সম্পূর্ণ জেড-অক্ষের দৃষ্টিতে ভাসমান।

— ইহুদি

Flexboxes ব্যবহার - stackoverflow.com/a/27812717/2680216

— জোশ বিশপের মুখবাঁকা দণ্ড

Answer 1

পিতামাতাকে ডিভ সেট করুন position: relative, তারপরে অভ্যন্তরীণ ডিভকে ...

position: absolute; 
bottom: 0;

... এবং আপনি সেখানে যান :)

Comments

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

— স্টিফেন মার্টিন

হতে পারে আপনি অবস্থান আপেক্ষিক এবং পরম কৌশলের সাথে একটি ভাসমান ডিভের মিশ্রণ ব্যবহার করতে পারেন।

— dylanfm

ভাসাটি ডানদিকে সেট করা এবং তারপরে উদাহরণস্বরূপ একটি নেতিবাচক শীর্ষের আপেক্ষিক অবস্থান প্রয়োগ করা হলে চিত্রটি চিত্রের উপরের নীচে / রেন্ডারটির নিচে ধাক্কা দেয় এবং সেই চিত্রের আগে ধারকটিতে রেন্ডার হয়।

— ফেলিক্স ল্যামৌরাক্স

অবস্থান নিরঙ্কুশটিকে অগ্রহণযোগ্য সমাধান হিসাবে উল্লেখ করা হয়েছিল, দুর্ভাগ্যক্রমে

— ভিটালি

নাঃ। এটি কাজ করে না। পরিবর্তে এটি পুরো পৃষ্ঠার নীচে অবস্থান করে।

— এরিক অ্যারোনস্টি

Answer 2

এটিকে কাজ করার একটি উপায় নিম্নলিখিত:

• আপনার উপাদানগুলি স্বাভাবিকের মতো বামে ভাসান

• ব্যবহার করে পিতামাতাকে ডিভ 180 ডিগ্রি ঘোরান

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  জেএসফিডাল: http://jsfiddle.net/wcneY/

• বাম দিকে ভাসমান সমস্ত উপাদানগুলি ঘোরান (তাদের একটি শ্রেণি দিন) তাদের আবার সোজা রাখতে 180 ডিগ্রি করুন। ভাল খবর! তারা নীচে ভাসা।

Comments

এটি সেরা সমাধান, কারণ আপনি আপনার সামগ্রী থেকে গতিশীল উচ্চতা রাখতে পারেন! ধন্যবাদ

— জর্ডান মরিস

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

— ট্রুবেনফুচস

নীচের ডান বাক্সের চারপাশে পাঠ্য মোড়ানো করতে অক্ষম: সমস্ত অক্ষর উল্টো দিকে ঘুরিয়ে দেয় এবং নীচে থেকে উপরে (?) পড়তে পারে। jsfiddle.net/xu8orw5L

— রবার্ট 4

এই তো পাগল মানুষ! আপনি যদি সবকিছু উল্টো করে রাখার বিষয়ে চিন্তা না করেন তবে এটি কাজ করে

— MQ87

এটি শয়তানদের কাজ এবং আমি তা অবিলম্বে এটি ব্যবহার করছি।

— হোঁচট খেয়ে

Answer 3

দু'দিন ধরে বিভিন্ন কৌশল নিয়ে লড়াই করার পরে আমাকে বলতে হবে এটি অসম্ভব বলে মনে হচ্ছে। এমনকি জাভাস্ক্রিপ্ট ব্যবহার করে (যা আমি করতে চাই না) এটি সম্ভব বলে মনে হচ্ছে না।

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

আমার ধারণা আমি যদি এই মুহুর্তে কারও কাছে শেষ মুহুর্তের পরামর্শ না পাই তবে এই আইটেমটির জন্য আমার নকশা লক্ষ্যগুলি পুনরায় দেখতে হবে it

Comments

না - এটি মুদ্রণ প্রকাশন নয়। কিছু কিছু জিনিস রয়েছে যা কেবলমাত্র এইচটিএমএল / সিএসএস ব্যবহার করে অসম্ভব কঠিন বা অসম্ভব।

— ট্রেনিংমার

আমি জানি এটি এখন বেশ ডাং পুরানো, তবে প্রশ্নের একই সংস্করণটি যখন আমার একই সমস্যাটি ঘটেছিল তখন কী ঘটেছিল এবং আমি ডিসপ্লে ব্যবহার করে এটি সমাধান করেছি: ফ্লেক্স এবং একটি খুব উচ্চ ফ্লেক্স-গ্রোম পরিমাণ এবং ধারক সহ একটি শীর্ষ পাত্রে সেট করে আমি কেবল নমনীয়-বৃদ্ধি হিসাবে নীচে ভাসতে চাইছিলাম: ১. এবং অবশ্যই বর্ধিত দিকটি কলাম হওয়া দরকার।

— আলেকজান্দ্রা

@ আলেকজান্দ্রার নীচের ডানদিকের বাক্সটি কি সাধারণ কোণগুলির মতো তার কোণগুলির চারপাশে পাঠ্যকে চাপ দেয়? "পাঠ্য প্রবাহ" ওপির অন্যতম প্রয়োজনীয়তা

— এজাজ

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

— রাকু

Answer 4

আমি জিকুয়ারিতে এটি অর্জন করেছি ফ্লোটের ডানদিকের উপরে শূন্য প্রস্থের স্ট্রুট উপাদান রেখে, তারপর পিতামাতুর উচ্চতা মাইনাস ভাসমান শিশুর উচ্চতা অনুসারে স্ট্রুট (বা পাইপ) আকার দিন।

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

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

সিএসএস

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

পাইপটি অবশ্যই প্রথমে আসবে, তারপরে কাটাআউট, তারপরে HTML ক্রমের পাঠ্য।

Comments

এটি অনেক কাজ এবং স্টাইলিংয়ের জন্য জাভাস্ক্রিপ্ট ব্যবহার করা সর্বদা একটি শেষ-ডাচ ফ্যালব্যাক কারণ আপনি যদি পরে নিজের সিএসএস পরিবর্তন করেন তবে এটি এত সহজেই গণ্ডগোল হয়ে যায়। তবে হ্যাঁ, এটি কাজ করে, সুতরাং যদি শব্দটি মোড়ানো দিয়ে নীচে ডিভ লাইনটি রাখা খুব গুরুত্বপূর্ণ: এটির জন্য যান।

— উইটজে

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

— atwixtor

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

— আইসিআরএফ

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

— ডিস্পায়ার

Answer 5

এটি পৃষ্ঠার নীচে একটি স্থির ডিভ রাখে এবং আপনি নীচে স্ক্রোল করার সাথে সাথে নীচে স্থির হয়ে যায়

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

Comments

তিনি যা করার চেষ্টা করছেন তা এটি করে না। @ টিমোটি এবং @ যোনা এটি সঠিকভাবে পেয়েছে।

— অ্যাডাম

Answer 6

ডিভটি অন্য ডিভের মধ্যে রাখুন এবং পিতামাতার ডিভের স্টাইলটি position:relative;সেট করুন চাইল্ড ডিভের উপর নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি সেট করুন:position:absolute; bottom:0;

Comments

টিমোথি আমার মন্তব্য দেখুন। আপনি এখানে দেখতে পাচ্ছেন: emsoft.ca/absolutebottomtest.html শব্দ মোড়কটি কাজ করে না। এবং কিছু বিষয়বস্তু অস্পষ্ট।

— স্টিফেন মার্টিন

আপনার যদি ডিভ ডিভের ভিতরে কোনও পাঠ্যের প্রয়োজন না হয় তবে এটিই সঠিক সমাধান।

— এনাডন

Answer 7

যদি আপনি কেবল লেখার নীচের অংশের সর্বশেষ পংক্তিতে ব্লকের পাশে চলে যান (পুরোপুরি বিপরীতে এবং এর নীচে বিপরীতে, যা আপনি ব্লকটি শেষ না করে এবং একটি নতুন শুরু না করেই করতে পারবেন না), ঠিক আছে প্যারেন্ট ব্লকের নীচের কোণে ব্লকটি ভাসা অসম্ভব। আপনি যদি কোনও ব্লকের মধ্যে অনুচ্ছেদে ট্যাগটিতে কিছু সামগ্রী রেখে থাকেন এবং ব্লকের নীচে ডান কোণায় একটি লিঙ্কটি ভাসাতে চান তবে লিঙ্কটি অনুচ্ছেদে ব্লকের মধ্যে রেখে ফ্লোতে সেট করুন: ডান, তারপরে পরিস্কারের সাথে একটি ডিভি ট্যাগে রেখে দিন : উভয় প্যারাগ্রাফ ট্যাগের ঠিক নীচে সেট। শেষ ডিভটি নিশ্চিত করা হয় যে প্যালেড ট্যাগটি ভাসমান ট্যাগকে ঘিরে রয়েছে।

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

Answer 8

যদি আপনি অভিভাবক উপাদানকে অবস্থান হিসাবে সেট করেন: আপেক্ষিক, আপনি বাচ্চাকে নীচের সেটিং পজিশনে সেট করতে পারেন: পরম; এবং নীচে: 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>
  

Answer 9

আপনি যদি পাঠ্যটি সুন্দরভাবে মোড়াতে চান: -

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

Answer 10

আমি জানি যে এই জিনিসগুলি পুরানো, তবে আমি সম্প্রতি এই সমস্যায় পড়েছি।

নিখুঁত অবস্থান Divs পরামর্শ ব্যবহার সত্যিই নির্বোধ, কারণ পুরো ভাসমান জিনিস ধরণের ধরণের সাথে নিখুঁত অবস্থানের সাথে পয়েন্ট হারিয়ে যায় ..

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

অনুরূপ প্রভাব অর্জন করতে আপনি এটি করতে পারেন: ডিভি ফ্লোট তৈরি করবেন না, তবে এটির প্রদর্শন সম্পত্তি সেট করুন inline-block। তবে আপনি এটি উল্লম্বভাবে সারিবদ্ধ করতে পারেন তবে এটি আপনাকে সন্তুষ্ট করে। আপনার কেবল পিতামাতার ডিভ সম্পত্তি হিসাবে , বা , সেট vertical-alignকরতে হবেtopbottommiddlebaseline

আমি আশা করি যে কাউকে সাহায্য করবে

Comments

এটি সাধারণ পরিস্থিতিতে যদি কাজ করে তবে কোনও ধারণা নেই, তবে jQueryMobile এর সাথে এটি সম্পূর্ণ অ-কার্যক্ষম।

— উইটজে

— ডিভটি

Answer 11

ফ্লেক্সবক্সের প্রবর্তনের সাথে , খুব বেশি হ্যাকিং ছাড়াই এটি বেশ সহজ হয়ে গেছে। 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>

Comments

আপনার মনে হয় না যে প্রশ্নটি পুরোপুরি পড়েছেন .. এটিকে নীচে অবস্থিত করা সহজ, তবে এটি পছন্দসই ভাসমান আচরণ দেয় না।

— ডেনিস98

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

— ডেনিস98

Answer 12

আমি দীর্ঘসময় ধরেও এই সমাধানটি খুঁজে পেয়েছি। এটি আমি পেয়েছি:

সারিবদ্ধ-স্ব: ফ্লেক্স-এন্ড;

লিঙ্ক: https://philipwalton.github.io/solve-by-flexbox/demos/vertical-centering/ তবে আমি এই লিঙ্কটি কোথায় খুললাম তা আমি মনে করতে পারি না। আশা করি এটা সাহায্য করবে

Answer 13

আমি শুধু একটি টেবিল করতে হবে।

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

এবং সিএসএস:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

এটি কর্মে দেখুন:
http://jsfiddle.net/mLphM/1/

Answer 14

আমি এই কৌশলগুলির বেশ কয়েকটি চেষ্টা করেছি এবং নিম্নলিখিতগুলি আমার জন্য কাজ করেছে, সুতরাং এখানে যদি অন্য সমস্ত কিছু ব্যর্থ হয় তবে এটি চেষ্টা করুন কারণ এটি আমার জন্য কাজ করেছে :)।

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

Answer 15

একটি @ ডেভ-কোকের এই পদ্ধতির পছন্দ করেছে। তবে এটি কেবল তখনই কাজ করে যদি পুরো সামগ্রীটি স্ক্রল না করে স্যুট করে। যদি কেউ উন্নতি করে আমি প্রশংসা করি

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/

Answer 16

এটি এখন ফ্লেক্স বাক্সের সাহায্যে সম্ভব। প্যারেন্ট ডিভের 'প্রদর্শন'টিকে কেবল' ফ্লেক্স 'হিসাবে সেট করুন এবং' মার্জিন-শীর্ষ 'সম্পত্তিটি' অটো 'তে সেট করুন। এটি উভয় বিভাজনের কোনও সম্পত্তি বিকৃত করে না।

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

Answer 17

নিশ্চিত নয়, তবে পূর্বে পোস্ট করা একটি পরিস্থিতি যদি আপনি অবস্থানটি ব্যবহার করেন তবে সন্তানের ডিভের উপর পরম পরিবর্তে আপেক্ষিকভাবে কাজ করবে বলে মনে হচ্ছে ।

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

আর টেবিল নেই ...!

Answer 18

আপনার যদি আপেক্ষিক প্রান্তিককরণের প্রয়োজন হয় এবং ডিআইভির এখনও আপনি যা চান তা আপনাকে না দেওয়া হয় তবে কেবল সারণী ব্যবহার করুন এবং কন্টেন্টটি নীচের দিকে প্রান্তিকিত করতে চান এমন ঘরে সেলাই = "নীচে" সেট করুন। আমি জানি যে এটি আপনার প্রশ্নের দুর্দান্ত উত্তর নয় যেহেতু ডিআইভি'র টেবিলগুলি প্রতিস্থাপন করার কথা রয়েছে, তবে ইমেজের ক্যাপশন দিয়ে সম্প্রতি আমাকে এটি করতে হয়েছিল এবং এটি এখনও অবধি নির্দোষভাবে কাজ করেছে।

Answer 19

আমি এর আগে পোস্ট করা এই দৃশ্যের চেষ্টা করেছি;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

পরম অবস্থানটি পৃষ্ঠাটি লোড করার পরে ব্রাউজারের সর্বনিম্ন অংশে ডিভটি সংশোধন করে তবে পৃষ্ঠাটি দীর্ঘতর হলে আপনি নীচে স্ক্রোল করেন যখন এটি আপনার সাথে স্ক্রোল করে না। আমি অবস্থান পরিবর্তন করে আপেক্ষিক হতে এবং এটি নিখুঁত কাজ করে। ডিভিডটি লোডের উপরে সোজা নীচে চলে যায় যাতে আপনি নীচে না পৌঁছা পর্যন্ত বাস্তবে এটি দেখতে পাবেন না।

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Comments

এটি কোনও অজানা উচ্চতা দিয়ে কাজ করার উপায়? দুর্ভাগ্যক্রমে মার্জিন-শীর্ষ: -100%; ধারনা করা উচ্চতা বোঝায় আমি অনুমান করছি।

— খ্রিস্টান

Answer 20

একটি আকর্ষণীয় পদ্ধতির একে অপরের উপরে ডান ভাসমান উপাদান দুটি স্ট্যাক করা হয়।

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

কেবলমাত্র সমস্যাটি হ'ল এটি কেবল তখনই কাজ করে যখন আপনি বাক্সটির উচ্চতা জানবেন।

Answer 21

স্টুর উত্তরটি এ পর্যন্ত কাজ করা সবচেয়ে নিকটতম আসে, তবে পাঠ্যটি যেভাবে ভিতরে আবৃত করে তার উপর ভিত্তি করে এটি আপনার বাহ্যিক ডিভের উচ্চতা পরিবর্তন হতে পারে এ বিষয়টি এখনও বিবেচনায় নেয় না। সুতরাং, কেবল একবার অন্তঃস্থ ডিভ ("পাইপ" এর উচ্চতা পরিবর্তন করে) স্থাপন করা যথেষ্ট হবে না enough এই পরিবর্তনটি একটি লুপের অভ্যন্তরে ঘটতে হবে, যাতে আপনি এখনও সঠিক অবস্থানটি অর্জন করেছেন কিনা তা ক্রমাগত পরীক্ষা করতে পারেন এবং প্রয়োজনে পুনরায় সমন্বয় করতে পারেন।

পূর্ববর্তী উত্তর থেকে সিএসএস এখনও পুরোপুরি বৈধ:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

যাইহোক, জাভাস্ক্রিপ্ট আরও দেখতে হবে:

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

Answer 22

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

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

Answer 23

এর ধারকটির margin-topনীচে ফুটার সেট করার উদ্দেশ্যে সিএসএস সম্পত্তি ব্যবহার করতে । এবং text-align-lastপাদলেখের বিষয়বস্তুগুলি কেন্দ্রে সেট করতে CSS সম্পত্তি ব্যবহার করতে।

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Answer 24

ওহ, যুবকরা .... আপনি এখানে আছেন:

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

কোন পরম অবস্থান! প্রতিক্রিয়াশীল! পুরানো স্কুল

Answer 25

বেশ পুরানো প্রশ্ন, তবে এখনও ... আপনি পৃষ্ঠার নীচে একটি ডিভিটি এভাবে ভাসতে পারেন:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

আপনি দেখতে পারেন যেখানে যাদুটি ঘটে। আমি মনে করি আপনি এটি পিতামহক ডিভের নীচে ভাসানোর জন্য একই কাজ করতে পারেন।

Comments

যদিও এটি এর চারপাশে পাঠ্য আবরণ করে না। এর পিছনে যে কোনও পাঠ্য উপস্থিত রয়েছে।

— গাইলবার

হ্যাঁ, এই শব্দটির সিএসএস অর্থে এটি "ভাসমান" নয়। এটি "সরানো" তবে ভাসমান নয়।

— এরিক

Answer 26

সহজ ...... এইচটিএমএল ফাইলের ডানদিকে .... নীচে "ফুটার" (বা নীচের অংশে ডিভটি আপনি চান) রাখুন। সুতরাং এটি করবেন না:

<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 ফাইলটিতে যেতে পারেন এবং "সাইডবার" বাম দিকে ভাসা করতে পারেন। তারপরে ডানদিকে "সামগ্রী" ভাসাবেন এবং তারপরে "পাদলেখ" পরিষ্কার করুন।

এটা আমার জন্য কাজ করা উচিত।

Answer 27

আমি position:absolute; bottom:0;সিএসএসের ভিতরে ডিভি আইডি যুক্ত করে প্রথম চেষ্টা করে কাজ করতে পেরেছি । আমি পিতামাতার স্টাইলটি যোগ করি নি position:relative;।

এটি ফায়ারফক্স এবং আইই 8, উভয়ই নিখুঁতভাবে কাজ করছে, এখনও IE 7 এ এটি ব্যবহার করে নি।

Answer 28

একটি বিকল্প উত্তর হ'ল টেবিল এবং সারিস্প্যানের ন্যায়বিচারের ব্যবহার। পূর্ববর্তী লাইনে সমস্ত টেবিল কোষ সেট করে (মূল সামগ্রীটি ব্যতীত) সারিস্প্যান = "2" হওয়ার জন্য আপনি সর্বদা আপনার প্রধান টেবিলের ঘরের নীচে একটি সেল গর্ত পাবেন যা আপনি সর্বদা ভালেন = "নীচে" রাখতে পারেন।

আপনি একটি লাইনের জন্য আপনার ন্যূনতম হওয়া উচিত এর উচ্চতাও সেট করতে পারেন। বাকী অংশটি যত বেশি স্থান নেয় তা নির্বিশেষে আপনি নীচে আপনার পছন্দের পাঠ্যের লাইনটি সর্বদা পাবেন।

আমি সমস্ত ডিভ উত্তরগুলি চেষ্টা করেছিলাম, আমার যা প্রয়োজন তা করার জন্য আমি তাদের পেতে সক্ষম হয়েছি।

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

Comments

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

— লাভএন্ডকোডিং

টেবিলগুলি খুব মাল্টি-ফর্ম্যাট বন্ধুত্বপূর্ণ নয় (মুদ্রণ, স্ক্রিন, মোবাইল), তাদের কাছে তাদের কোনও প্রবাহ নেই। শুধু একটি বিকল্প প্রস্তাব।

— সিডিটিউনার

Answer 29

এখানে আমার সমাধান:

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

Answer 30

আপনি 1px প্রস্থ সহ একটি খালি উপাদান ব্যবহার করে এটি ভাসতে চেষ্টা করতে পারেন। তারপরে আপনি যে উপাদানটি প্রকৃতপক্ষে অবস্থান করতে চান তা সাফ করুন এবং খালি উপাদানটির উচ্চতাটি কতটা নিচে চলে যায় তা নিয়ন্ত্রণ করতে ব্যবহার করুন।

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}