example - html computer code




আমি কিভাবে একটি ধারক তার পাত্রে নীচে ভাসা পেতে পারি? (20)

এই প্রশ্নটি ইতিমধ্যে একটি উত্তর আছে:

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

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

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

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


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

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

.invisible {
float: left;  
}

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

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

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

$("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

}

পাইপটি 1 ম, তারপর cutout, তারপর HTML ক্রম টেক্সট পাঠাতে হবে।


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

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


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

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

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

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

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

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

সারিবদ্ধ স্ব: ফ্লেক্স-শেষ;

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


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

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/


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

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


একটি বিকল্প উত্তর টেবিল এবং rowspan বুদ্ধিমান ব্যবহার। পূর্ববর্তী লাইন (মূল বিষয়বস্তু এক ছাড়া) থেকে সকল টেবিল কক্ষ সেট করে রুপ্প্যান = "2" আপনি সর্বদা আপনার মেইন টেবিল সেলের নীচের অংশে একটি সেল হোল পাবেন যা আপনি সর্বদা valign = "bottom" রাখতে পারেন।

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

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

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

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

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

এটি পৃষ্ঠাটির নীচের অংশে একটি নির্দিষ্ট ডিভি রাখে এবং নীচে স্ক্রোল করার সময় নিচের দিকে সংশোধন করে

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

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

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

আমি যদি কারো কাছে শেষ মিনিটের পরামর্শ না থাকে তবে আমি এই আইটেমটির জন্য নকশা লক্ষ্যগুলি পুনর্বিবেচনা করতে হবে।


তার ধারক নীচে কোন উপাদান স্থাপন করতে, শুধু এই ব্যবহার:

div {
    position: absolute;
    bottom: 0px;
}

নিশ্চিত না, তবে পূর্বে পোস্ট করা একটি দৃশ্যটি যদি আপনি অবস্থানটি ব্যবহার করেন তবে শিশু বিভাগে সম্পূর্ণরূপে আপেক্ষিকভাবে কাজ করে।

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

এবং কোন টেবিল ...!


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


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


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

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


সহজ ... এইচটিএমএল ফাইল ঠিক .... নীচে "পাদচরণ" (অথবা আপনি নীচের অংশে যা চান div) আছে। তাই না এই না:

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

যে আমার জন্য work.did উচিত।


Flexbox প্রবর্তনের সাথে এটি অনেক হ্যাকিং ছাড়াই বেশ সহজ হয়ে উঠেছে। align-self: flex-end সন্তানের উপাদানতে align-self: flex-end cross-axis বরাবর এটি সংলগ্ন করবে।

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


position: relative থেকে পিতা-মাতা div সেট করুন position: relative , তারপর ভিতরের div ...

position: absolute; 
bottom: 0;

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





css