সিএসএস ব্যবহার করে কীভাবে 3 ডিভস পাশ দিয়ে ভাসাবেন?

Question

আমি জানি কীভাবে 2 ডিভগুলি পাশাপাশি বরাবর ভাসাবেন, কেবল একটি বামে এবং অন্যটি ডানদিকে ভাসাবেন।

তবে কীভাবে 3 ডিভ দিয়ে এটি করা যায় বা আমি কেবল এই উদ্দেশ্যে টেবিল ব্যবহার করব?

Comments

পর্যাপ্ত তথ্য নেই। স্তরগুলি কত প্রশস্ত?

— জোশ স্টোডোলা

আমি display: inline-blockতাদের না ভাসিয়ে চেয়েছি। যদি তাদের প্রস্থগুলি ধারক প্রস্থের তুলনায় মোট কম হয় তবে তারা একে অপরের পাশে বসবে।

— অ্যাডাম ওয়েট

আমি "প্রদর্শন: টেবিল" ব্যবহার করার পরামর্শ দিই। এটি সবচেয়ে রক্ষণাবেক্ষণযোগ্য এবং নির্ভরযোগ্য সমাধান। স্ট্যাকওভারফ্লো

— জন হেন্কেল

Answer 1

কেবল তাদের প্রস্থ দিন এবং float: left;এখানে একটি উদাহরণ দেওয়া হয়েছে:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Comments

পৃষ্ঠাটি প্রসারিত হওয়ার সাথে সাথে যদি আপনি সমস্তটি প্রসারিত করতে চান তবে কী হবে?

— কোডিবাগস্টাইন

@ আইম্রে px এর পরিবর্তে% মাত্র ব্যবহার করুন

— তেহত্রিস

<br style="clear: left;" />বিশেষত কেন সেই স্টাইলটি ব্যবহার করবেন তা কী আপনি ব্যাখ্যা করতে পারেন ।

— মাইক ডি ক্লার্ক

@ মাইকেডে ক্লার্ক এটি একটি ক্লিয়ারফিক্স, পিতামাতার পতন এড়ানোর জন্য।

— অ্যাঞ্জেল পোলাইটিস

@ নিক ক্র্যাভার যেমন ব্যাখ্যা করেছেন, আপনার সমস্ত উপাদানগুলি ভাসমান: বাম সম্পত্তি দেওয়া উচিত। এটি ঘটছে কারণ ভাসমান সম্পত্তি উল্লেখ করে যে কীভাবে উপাদানটিকে তার পিতামাতার ধারকটির বাম বা ডানদিকে রাখা হয় ।

— নেছা জোরিক

Answer 2

আধুনিক উপায় হ'ল সিএসএস ফ্লেক্সবক্স ব্যবহার করা , সমর্থন টেবিলগুলি দেখুন ।

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

আপনি সিএসএস গ্রিডও ব্যবহার করতে পারেন , সমর্থন সারণীগুলি দেখতে পারেন ।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Answer 3

আপনি দুটি ডিভের জন্য যেমন করেন তেমনিভাবে তৃতীয়টি বাম বা ডানদিকেও ভাসান।

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Comments

কিন্তু ডিআইভি একটি ব্লক স্তর উপাদান, তাই না? তারপরে কীভাবে এগুলি পাশাপাশি রাখা হয় এবং পরবর্তী লাইনে নয় (ব্লক স্তরের উপাদানগুলি শুরু করে এবং একটি লাইন বিরতি দিয়ে শেষ হয়)। ভাসমান কি এটির উপরও কিছু প্রভাব ফেলে?

— আশ্বিন

Answer 4

সব ছেড়ে ভাসা

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

Answer 5

<br style="clear: left;" />

সেই কোডটি যে কেউ সেখানে পোস্ট করেছে, এটি কৌশলটি করেছে !!! আমি যখন কনটেইনার ডিআইভি বন্ধ করার ঠিক আগে এটি আটকান, তখন এটি পরবর্তী সমস্ত ডিআইভিগুলি ডিআইভিগুলির সাথে ওভারল্যাপিং থেকে পরিষ্কার করতে সহায়তা করে যা আমি উপরে পাশাপাশি পাশাপাশি তৈরি করেছি!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)

Answer 6

বাম দিকে তিনটি ডিভিড ভাসা। এখানকার মত:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

Comments

মুল বক্তব্যটি হ'ল আমার উত্তরটি সবচেয়ে সঠিক এবং যখন কোনও নতুন ব্যক্তি ইন্টারনেটে এই কিউটি অনুসন্ধান করবে তখন তারা আমার উত্তরটি পাবে যা তাদের জন্য সবচেয়ে সহায়ক হবে।

— আরভেন

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

— সিফাই

@ cfi আপনাকে ধন্যবাদ, আমি এটি ভবিষ্যতের রেফারেন্সের জন্য রাখব।

— आर्

Answer 7

আমি সাধারণত প্রথম দিকে বাম দিকে, দ্বিতীয়টি ডানদিকে ভাসি। তৃতীয়টি স্বয়ংক্রিয়ভাবে তখন তাদের মধ্যে সারিবদ্ধ হয়।

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

Comments

যখন ব্রাউজারটি পুনরায় আকার দেওয়া হয় তখন কি গণ্ডগোলের কারণ হয় না?

— কোডিবাগস্টাইন

Answer 8

<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

এই উপকারের সুবিধাটি হ'ল আপনি প্রতিটি কলামের প্রস্থকে যতক্ষণ না আপনি এটি 100% এর নিচে রাখবেন ততক্ষণ অপরটির স্বতন্ত্র সেট করতে পারবেন, যদি আপনি 3 x 30% ব্যবহার করেন তবে 10% টি কলমের মধ্যে 5% বিভাজক স্থান হিসাবে বিভক্ত হবে

Answer 9

আপনি ভাসা করতে পারেন: তাদের সবার জন্য বাম এবং প্রস্থটি 33.333% এ সেট করুন

Answer 10

শৈলীতে "প্রদর্শন: ব্লক" যুক্ত করার চেষ্টা করুন

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Answer 11

আমি বুটস্ট্র্যাপের উত্তরটি দেখতে পাইনি, সুতরাং এর মূল্য কী:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

বুটস্ট্র্যাপের শতকরা হারগুলি বের করতে দিন। আমি উভয়কে সাফ করতে চাই, কেবল ক্ষেত্রেই।

Comments

বুটস্ট্র্যাপ 4-এ, আমি মনে করি আপনাকে পুরো জিনিসটি একটি ডিভের সাথে সারি ক্লাসের সাথে মুড়ে ফেলতে হবে।

— জন গ্রাবাউসকাস

Answer 12

আমি এই পদ্ধতিটি পছন্দ করি, IE এর পুরানো সংস্করণগুলিতে ফ্লোটগুলি খারাপভাবে সমর্থিত হয় (সত্যিই? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

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

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

বিশ্বের সবচেয়ে আশ্চর্যজনক জিনিস নয়, তবে অন্তত পুরানো আইইএসগুলিতে ভাঙবে না।

Comments

অবশ্যই, পরম অবস্থান এই কৌশল এবং কারণে ব্যবহার করতে যদি উচ্চতা নির্ধারণ করতে, মত এই কিছু একটি ধারক উপর আছে divs ঘিরা এবং postprocessing করতে হবে:

— jpbourbon

jQuery (নথি)। প্রস্তুত (ফাংশন () {jQuery ('। মূল')। উচ্চতা (ম্যাথ.ম্যাক্স (jQuery ('। কলাম-বাম')। উচ্চতা (), jQuery ('। কলাম-ডান')। উচ্চতা (), jQuery ('। কলাম-কেন্দ্র')। উচ্চতা ()))}); বিশ্বের সবচেয়ে আশ্চর্যজনক জিনিস নয়, তবে অন্তত পুরানো আইইএসগুলিতে ভাঙবে না।

— jpbourbon

Answer 13

তবে এটি কি ক্রোমে কাজ করে?

প্রতিটি ডিভ ভাসা এবং পরিষ্কার সারি; উভয় সারি জন্য। আপনি চাইলে প্রস্থগুলি সেট করার দরকার নেই। ক্রোম 41, ফায়ারফক্স 37, আইই 11 এ কাজ করে

জেএস ফিডল জন্য ক্লিক করুন

এইচটিএমএল

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

সিএসএস

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Answer 14

আমি এখানে একটি <footer>এলিমেন্টের সাথে এর অনুরূপ কিছু করতে পরিচালিত করেছি :

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

সিএসএস:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

Answer 15

@ লেনিয়েল এই পদ্ধতিটি ভাল তবে আপনাকে সমস্ত ভাসমান ডিভের প্রস্থ যুক্ত করতে হবে। আমি তাদের সমান প্রস্থ করা বা নির্দিষ্ট প্রস্থ নির্ধারণ করতে বলব। কিছুটা এইরকম

.content-wrapper > div { width:33.3%; }

আপনি প্রতিটি ডিভিতে ক্লাসের নামগুলি যুক্ত করার পরিবর্তে বরাদ্দ করতে পারেন inline style, এটি ভাল অনুশীলন নয়।

এই ডিভের নীচে থাকা সামগ্রীগুলি এড়ানোর জন্য একটি ক্লিয়ারফিক্স ডিভি বা পরিষ্কার ডিভ ব্যবহার করতে ভুলবেন না।

আপনি কীভাবে ক্লিয়ারফিক্স ডিভ ব্যবহার করবেন সে সম্পর্কে বিশদটি এখানে পেতে পারেন