পাশাপাশি কীভাবে ডিভ রাখবেন

Question

আমার একটি প্রধান মোড়ক ডিভিও রয়েছে যা 100% প্রস্থে সেট করা আছে। এর ভিতরে আমি দুটি ডিভ করতে চাই, একটি নির্দিষ্ট প্রস্থ এবং অন্যটি বাকী স্থানটি পূরণ করবে। বাকী জায়গাটি পূরণ করতে আমি কীভাবে দ্বিতীয় ডিভটি ভাসিয়ে দেব। কোন সাহায্যের জন্য ধন্যবাদ।

Comments

পরের বারেও আপনার উদাহরণ কোডটি রাখুন দয়া করে প্রশ্নটি এখানে বিকাশকারীদের কাছে আরও স্পষ্ট হয়ে উঠবে ..

— রব

অবস্থান: নিখুঁত একটি বিকল্প? আপনি পাত্রে পাশের অবস্থানটি সেট করতে পারেন এবং ডিভটি নতুন আকারটি নেবে।

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

Answer 1

আপনি যা চেয়েছেন তা করার অনেকগুলি উপায় রয়েছে:

1. সিএসএস floatসম্পত্তি ব্যবহার :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. সিএসএস displayসম্পত্তি ব্যবহার করে - যা divএর মতো কাজ করার জন্য ব্যবহৃত হতে পারে table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

আরও পদ্ধতি আছে, তবে এই দুটি সর্বাধিক জনপ্রিয়।

Comments

@ ফিলক্সো থেকে এইচটিএমএল 5 সমাধান, পরিবর্তে এটি ব্যবহার করুন

— TheMcMurder

পূর্ববর্তী মন্তব্যকারী কী বলেছিল: ফিলোক্সো প্রতি HTML5 সমাধান # 3 হিসাবে যুক্ত করার বিষয়টি বিবেচনা করুন।

— আহমেদ ফাসিহ 26:56

@TheMcMurder: আমাদের জন্য যাদের পুরানো ব্রাউজারগুলি সমর্থন করা দরকার (যেমন আইআই <11), এটি কোনও বিকল্প নয়।

— ওয়েবিন্দ

@ ওভিন্ড, আপনি ঠিক বলেছেন। এটি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে। আপনি যদি IE 8, 9, বা 10 সমর্থন করে থাকেন তবে আপনাকে পলিফিল সমর্থন করতে হবে আমি polyfill.io cdn.polyfill.io/v2/docs বা github.com/10up/flexibility এর মতো একটি পরিষেবার প্রস্তাব দিচ্ছি তবে আপনার সত্যিই কঠোর হতে পারে প্রয়োজনীয়তা যা পলিফিল ব্যবহার বন্ধ করে দেয়।

— TheMcMurder

উপচে পড়া কি: লুকানো কি? একটি নির্দিষ্ট উচ্চতা সঙ্গে উপাদান জন্য এটি না?

— মাইকেল 25

Answer 2

সিএসএস 3 চালু করেছে নমনীয় বাক্সগুলি (যেমন। ফ্লেক্স বাক্স) যা এই আচরণটি অর্জন করতে পারে।

প্রথম ডিভের প্রস্থটি কেবল সংজ্ঞায়িত করুন এবং তারপরে দ্বিতীয়টিকে একটি flex-growমান দিন 1যা এটি পিতামাতার অবশিষ্ট প্রস্থটি পূরণ করতে দেয়।

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFizz ডেমো

লক্ষ্য করুন আনমন বাক্সে পুরাতন ব্রাউজার সঙ্গে পিছন সামঞ্জস্যপূর্ণ নয়, কিন্তু আধুনিক ব্রাউজারে লক্ষ্য করে একটি মহান বিকল্প (দেখুন Caniuse এবং MDN )। কিভাবে আনমন বক্স ব্যবহার করতে উপর একটি মহান ব্যাপক গাইড পাওয়া যায় সিএসএস ট্রিকস ।

Comments

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

— আলোকিত

এর মতো কিছু ব্যবহার করার জন্য পিছনের দিকের সামঞ্জস্যপূর্ণ কোনও পদ্ধতি আছে, যেমন আমাদের জন্য দরিদ্র সেপস যারা এখনও IE 8-10 সমর্থন করতে পারে

— বেন এ। হিলেলি

@ বেনা.হিল্লি যা আপনার প্রয়োজনীয়তার উপর নির্ভর করতে পারে (উদাঃ প্রগতিশীল বর্ধন বা কৃপণয় অবনতি ) তবে দ্রুত অনুসন্ধানের ফলে এটি পাওয়া গেল (কিছুটা সেকেলে) "কীভাবে বাস্তব জগতে ফ্লেক্সবক্স ব্যবহার করবেন" গাইড পাশাপাশি ফ্লেক্সি.জেএস যা IE6-9 সমর্থন করে। বিকল্পভাবে, তারা একই জিনিস অর্জন করার কারণে এই প্রশ্নের অন্য যে কোনও উত্তর চেষ্টা করে দেখুন।

— ফিলোক্সো

Answer 3

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

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

আপনার ডিআইভিগুলির প্রস্থ নির্দিষ্ট করার প্রয়োজন হতে পারে বা নাও হতে পারে

Comments

সম্ভবত display:flexসেরা সমাধান, তবে আমি মনে করি inline-blockএটিও দুর্দান্ত কারণ এটি আরও ব্রাউজারে কাজ করে। যাইহোক, আপনাকে <div style="white-space:nowrap">পুনরায় আকার পরিবর্তন করতে রোধ করতে আপনার সাথে দুটি ডিভগুলি মোড়ানো প্রয়োজন ।

— জন হেন্কেল

এটি টেম্পলেট করার জন্য ভাল সমাধান। একমাত্র বিষয়টি হ'ল এটি নীচে কম কন্টেন্ট সহ একটি ডিভ ঠেলে। কিভাবে এটি শীর্ষে ঠেলাবেন?

— প্রায় প্রথম

এনভিএম, এটি সন্ধান করার জন্য কেবল প্রয়োজন, সমাধানটি হল: উল্লম্ব-সারিবদ্ধ: শীর্ষ;

— প্রায় প্রথম

@ জনহেন্কেল এর অর্থ এটি সমস্ত ব্রাউজারের জন্য নয়, এটি কি সমস্ত ব্রাউজারের জন্য একই উপায়ে কাজ করতে পারে না? inline-blockকোড।

— কাবিন্দু গায়ান্থা

@ গিলারমো এটি ভালভাবে কাজ করছে না। সমস্ত ডিভগুলি পাশাপাশি রাখছে না। কেন যে। এটা স্পষ্ট নয়.

— কাবিন্দু গায়ান্থা

Answer 4

এটি অর্জনের জন্য আপনি সিএসএস গ্রিড ব্যবহার করতে পারেন, এটি উদাহরণের উদ্দেশ্যগুলির জন্য লম্বা হাতের সংস্করণ:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

বা ভাসমান এবং মার্জিন ব্যবহার করে আরও প্রচলিত পদ্ধতি।

জিনিসগুলি কোথায় রয়েছে - এবং ভাসমান-অঞ্চলের নীচে থাকা সামগ্রীর সাথে কী করতে হবে তা দেখানোর জন্য আমি এই উদাহরণটিতে একটি পটভূমি রঙ অন্তর্ভুক্ত করেছি।

আপনার স্টাইলগুলি বাস্তব জীবনে ইনলাইন রাখবেন না, স্টাইল শীটে এগুলি বের করুন।

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Answer 5

প্রথম ডিভকে একটি ফ্ল্যাট বামে এবং ঠিক করে দিন, দ্বিতীয় ডিভিও 100% প্রস্থের একটি ফ্লোট বাম দিন। কৌতুক করা উচিত। আপনি যদি এটির নীচে আইটেমগুলি রাখতে চান তবে আপনার একটি পরিষ্কার প্রয়োজন: উভয় আইটেমের নীচে আপনি রাখতে চান

Answer 6

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হবে। মার্জিন-বাম ছাড়াই আপনি বিষয়বস্তুগুলি বাম দিকে চালিত সমস্ত বিষয় নিয়ে চলে যাবেন যদি আপনার সামগ্রীটি আপনার সাইডবারের চেয়ে দীর্ঘ হয়।

Answer 7

আপনি যদি আই 6 টি টেজেটিং করছেন না, তবে দ্বিতীয়টি ভাসাবেন <div>এবং এটিকে প্রথম <div>স্থির প্রস্থের সমান (বা সম্ভবত কিছুটা বড়) দিতে হবে ।

এইচটিএমএল:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

সিএসএস:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

'বিশ্রামের স্থান' <div>'নির্দিষ্ট-প্রস্থ' এর চেয়ে বেশি সামগ্রী থাকতে পারে এমন সম্ভাবনার জন্য মার্জিন অ্যাকাউন্টগুলি <div>।

নির্দিষ্ট প্রস্থ একটিকে ব্যাকগ্রাউন্ড দেবেন না; যদি আপনার এগুলিকে আলাদা আলাদা 'কলাম' হিসাবে দেখা দরকার তবে ফক্স কলামগুলি কৌশলটি ব্যবহার করুন ।