কিভাবে অন্য ডিভের মধ্যে 3 ডিভ (বাম / কেন্দ্র / ডান) সারিবদ্ধ করবেন?

Question

আমি একটি ধারক ডিভের ভিতরে 3 ডিভগুলি সারিবদ্ধ করতে চাই, এরকম কিছু:

[[LEFT]       [CENTER]        [RIGHT]]

কনটেইনার ডিভটি 100% প্রশস্ত (কোনও সেট প্রস্থ নয়), এবং কেন্দ্র ডিভটি ধারকটির আকার পরিবর্তন করার পরে কেন্দ্রে থাকা উচিত।

সুতরাং আমি সেট:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

তবে এটি হয়ে যায়:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

কোন টিপস?

Comments

যদি ধারকটি 300px প্রশস্তের চেয়ে বেশি সংকীর্ণ হয়ে যায়, আপনি যদি ওভারফ্লো সম্পত্তিটি সেট না করেন তবে এটি ঘটবে।

— 21

ফ্লেক্সবক্স এবং গ্রিড: jsfiddle.net/w0s4xmc0/12963

— মনোজ কুমার

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

— ক্রিস এল

Answer 1

সেই সিএসএসের সাহায্যে আপনার ডিভগুলি এমনভাবে রাখুন (প্রথমে ভাসমান):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

পিএস আপনি ডানদিকে, বাম দিকে এবং তারপরে কেন্দ্রেও ভাসতে পারেন। গুরুত্বপূর্ণ বিষয়টি হ'ল "মূল" কেন্দ্র বিভাগের আগে ভাসমানগুলি আসে।

পিপিএস আপনি প্রায়শই #containerএই স্নিপেটের অভ্যন্তরে সর্বশেষে চান : <div style="clear:both;"></div>যা #containerকেবলমাত্র এর উচ্চতা না নিয়ে #centerএবং সম্ভবত পক্ষগুলি নীচে থেকে বাইরে বেরিয়ে আসার পরিবর্তে উভয় পাশের ফ্লোটগুলি ধারণ করতে উল্লম্বভাবে প্রসারিত হবে ।

Comments

ধারকটি 100% না থাকলে আপনি কী করবেন? আমি এখানে এরকম কিছু চেষ্টা করছি, আমি ডিভটি ধারকটির ডানদিকে থাকতে চাই, তবে এটি পৃষ্ঠার ডানদিকে

— ভাসবে

@ টিয়াগো: ভাসমানগুলি এর ভিতরে থাকলে তারা ডিভের প্রতি সীমাবদ্ধ থাকে। ধারকটির প্রস্থ এটি নির্ধারণ করে কি তা পরীক্ষা করুন border:solid। যদি এটি 100% হয় তবে এটিকে আপনার পৃষ্ঠার ভিতরে স্থাপন করার জন্য এটি অন্য ডিভের সাথে যুক্ত করুন।

— জেমস পি।

এছাড়াও - যদি আপনি এগুলি একটি পরিবর্তনযোগ্য কনটেইনারের ভিতরে রাখছেন তবে ডান দিক থেকে ভাসমান ডিভটি নীচে নামাতে না দেওয়ার জন্য ধারকটির ন্যূনতম প্রস্থ নির্ধারণ করতে ভুলবেন না।

— টেপেফ্র্যাক

এই উত্তরটি ছয় বছরেরও বেশি পুরানো। 2016 সালে, সঠিক উত্তরটি হ'ল ফ্লেক্সবক্স।

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

— নিনজা কোডিং

Answer 2

আপনি যদি এইচটিএমএল কাঠামো পরিবর্তন করতে না চান তবে আপনি text-align: center;মোড়কের উপাদান এবং একটি display: inline-block;কেন্দ্রিক উপাদানকে যুক্ত করেও করতে পারেন ।

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

লাইভ ডেমো: http://jsfiddle.net/CH9K8/

Comments

এটিই একমাত্র সমাধান যা খুব শীঘ্রই ভাঁজ না করে উইন্ডো প্রস্থের সাথে সঠিকভাবে আকার পরিবর্তন করে।

— জারেড সিলি

বাম এবং ডান আকারগুলি সমান হলে এটি উপযুক্ত। অন্যথায় কেন্দ্র কেন্দ্রিক নয়।

— মর্টালিস

Answer 3

অনুভূমিকভাবে ফ্লেক্সবক্স ব্যবহার করে তিনটি ডিভস সারিবদ্ধ করা

অন্য ডিভের মধ্যে অনুভূমিকভাবে ডিভগুলি সারিবদ্ধ করার জন্য এখানে একটি CSS3 পদ্ধতি রয়েছে।

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

justify-contentসম্পত্তি পাঁচটি মান লাগে:

• flex-start (ডিফল্ট)
• flex-end
• center
• space-between
• space-around

সমস্ত ক্ষেত্রে, তিনটি ডিভ একই পাতায় রয়েছে। প্রতিটি মানের বর্ণনার জন্য দেখুন: https://stackoverflow.com/a/33856609/3597276

---

ফ্লেক্সবক্সের সুবিধা:

1. সর্বনিম্ন কোড; খুবই কার্যকরী
2. উভয় উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করা সহজ এবং সহজ
3. সমান উচ্চতার কলামগুলি সহজ এবং সহজ
4. ফ্লেক্স উপাদানগুলি সারিবদ্ধ করার জন্য একাধিক বিকল্প
5. এটি প্রতিক্রিয়াশীল
6. ফ্লোটস এবং টেবিলগুলির বিপরীতে, যা সীমিত বিন্যাসের ক্ষমতা সরবরাহ করে কারণ এগুলি কখনও বিন্যাস তৈরির উদ্দেশ্যে নয়, ফ্লেক্সবক্স একটি বিস্তৃত বিকল্পের বিস্তৃত আধুনিক (সিএসএস 3) কৌশল।

---

ফ্লেক্সবক্স সম্পর্কে আরও জানতে:

• ফ্লেক্স আইটেম সারিবদ্ধ করার জন্য পদ্ধতি
• সিএসএস নমনীয় বাক্সগুলি ব্যবহার করে ~ এমডিএন
• ফ্লেক্সবক্স ~ সিএসএস-ট্রিকসের সম্পূর্ণ নির্দেশিকা
• কি ফ্লেক্সবক্স ?! ~ ইউটিউব ভিডিও টিউটোরিয়াল

---

ব্রাউজার সমর্থন: ফ্লেক্সবক্স IE <10 বাদে সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত । সাফারি 8 এবং আই 10 এর মতো সাম্প্রতিক কিছু ব্রাউজার সংস্করণগুলির জন্য বিক্রেতার উপসর্গের প্রয়োজন । উপসর্গ যুক্ত করার জন্য দ্রুত উপায়ের জন্য অটোপ্রিফিক্সার ব্যবহার করুন । এই উত্তরে আরও বিশদ ।

Comments

ফ্লেট ব্যবহারের চেয়ে ফ্লেক্স অনেক ভাল।

— ফাইজান আকরাম দার

এখানে এবং লিঙ্কযুক্ত পোস্টগুলিতে দুর্দান্ত ব্যাখ্যা! একটি সিডনোট: ধারক ডিভের অভ্যন্তরে ফ্লেক্স আইটেম হিসাবে "স্প্যান" উপাদানগুলি ব্যবহার করা ফায়ারফক্সে কাজ করেছিল তবে জাভাফেক্স ভিত্তিক ব্রাউজারে (ওয়েবভিউ) কাজ করে না। "স্প্যানস" পরিবর্তন করে "ডিভ" এ দুটিতেই কাজ হয়েছিল।

— অশোক

ইন্টারনেট এক্সপ্লোরার 10 এবং পূর্ববর্তী সংস্করণগুলি ন্যায়সঙ্গত বিষয়বস্তুর সম্পত্তি সমর্থন করে না

— D.Snap

দুর্ভাগ্যক্রমে এটি কেবল একই প্রস্থের আইটেমগুলির সাথে কাজ করে। এছাড়াও স্ট্যাকওভারফ্লো.com

— হ্যান্ডেল করুন

দুর্দান্ত, আমি এখানে সমস্ত সমাধান চেষ্টা করেছিলাম এবং এটিই সেরা!

— নিকো মুলার

Answer 4

ফ্লোট সম্পত্তি প্রকৃতপক্ষে পাঠ্য সারিবদ্ধ করার জন্য ব্যবহৃত হয় না।

এই সম্পত্তিটি ডান বা বাম বা কেন্দ্রের মধ্যে উপাদান যুক্ত করতে ব্যবহৃত হয়।

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

float:leftআউটপুট জন্য হবে[First][second][Third]

float:rightআউটপুট জন্য হবে[Third][Second][First]

তার অর্থ ফ্লোট => বাম সম্পত্তি আপনার পরবর্তী উপাদানটিকে আগেরটির বামে যুক্ত করবে, ডান সহ একই কেস

এছাড়াও আপনাকে পিতামাতার উপাদানগুলির প্রস্থ বিবেচনা করতে হবে, যদি শিশু উপাদানগুলির প্রস্থের যোগফল পিতামণ্ডলের উপাদানগুলির প্রস্থের চেয়ে বেশি হয় তবে পরবর্তী উপাদানটি পরবর্তী লাইনে যুক্ত করা হবে

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[প্রথম সেকেন্ড]

[তৃতীয়]

সুতরাং নিখুঁত ফলাফল পেতে আপনাকে এই সমস্ত দিক বিবেচনা করতে হবে

Answer 5

আমি আমার বারগুলি টাইট এবং ডায়নামিক পছন্দ করি। এটি সিএসএস 3 এবং এইচটিএমএল 5 এর জন্য

1. প্রথমত, প্রস্থটি 100px এ সেট করা সীমাবদ্ধ। এটা করবেন না।

2. দ্বিতীয়ত, ধারকটির প্রস্থটি 100% এ সেট করা ঠিকঠাক কাজ করবে, যতক্ষণ না এটি নেভিগেশন বা ক্রেডিট / কপিরাইট বারের মতো পুরো অ্যাপ্লিকেশনটির জন্য শিরোনাম / পাদচরণ বার হওয়ার কথা। right: 0;পরিবর্তে সেই দৃশ্যের জন্য ব্যবহার করুন ।

3. আপনি আইডির (হ্যাশ) ব্যবহার করছেন #container , #leftইত্যাদি) শ্রেণীর (পরিবর্তে .container, .left,, ইত্যাদি), যা জরিমানা যদি না আপনি আপনার কোড অন্যত্র আপনার শৈলী প্যাটার্ন পুনরাবৃত্তি করতে চাই। আমি পরিবর্তে ক্লাস ব্যবহার বিবেচনা করব।

4. এইচটিএমএল এর জন্য, বাম, কেন্দ্র এবং ডানদিকে অর্ডার অদলবদল করার দরকার নেই। display: inline-block;এটি সংশোধন করে, আপনার কোডটিকে কোনও ক্লিনার এবং যুক্তিগতভাবে আবার ক্রমে ফিরিয়ে আনতে হবে।

5. শেষ অবধি, আপনাকে ভাসমানগুলি পরিষ্কার করে ফেলতে হবে যাতে এটি ভবিষ্যতের সাথে ঝামেলা না করে <div> । আপনি এই সঙ্গে এটিclear: both;

সংক্ষেপ:

এইচটিএমএল:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

সিএসএস:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

HAML এবং SASS ব্যবহার করে বোনাস পয়েন্ট;)

HAML:

.container
  .left
  .center
  .right
  .clear

Sass:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

Answer 6

উপাদানগুলি সারিবদ্ধ করার জন্য বেশ কয়েকটি কৌশল রয়েছে।

01. টেবিল ট্রিক ব্যবহার

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

02. ফ্লেক্স ট্রিক ব্যবহার করা

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

03. ফ্লোট ট্রিক ব্যবহার করে

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Answer 7

এটি CSS3 ফ্লেক্সবক্স ব্যবহার করে সহজেই করা যেতে পারে, এমন একটি বৈশিষ্ট্য যা <IE9প্রায় প্রতিটি ব্রাউজারে ভবিষ্যতে (কখন সম্পূর্ণ মৃত) ব্যবহৃত হবে ।

ব্রাউজারের সামঞ্জস্যতা সারণীটি পরীক্ষা করুন

এইচটিএমএল

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

সিএসএস

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

আউটপুট:

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Answer 8

টুইটার বুটস্ট্র্যাপ সহ:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

Answer 9

সম্ভাব্য উত্তর, আপনি যদি এইচটিএমএল ক্রম রাখতে চান এবং ফ্লেক্স ব্যবহার না করেন।

এইচটিএমএল

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

সিএসএস

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

কোড পেন লিঙ্ক

Answer 10

এইচটিএমএল:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

সিএসএস:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; নিখুঁত কেন্দ্র প্রান্তিককরণ দেয়।

জেএসফিডাল ডেমো

Comments

এটি কেবলমাত্র আপনার উদাহরণে ডিভকে কেন্দ্র করে কারণ পাঠ্য উপাদানগুলির প্রায় একই আকার রয়েছে, একটি পাঠ্য দীর্ঘ করুন এবং # সেন্টার ডিভটি

— কাই নাক

Answer 11

আমি এটিকে আরও সহজ করার এবং কন্টেনারের প্রয়োজনীয়তা ছাড়াই এটি অর্জনের জন্য আরও একটি প্রচেষ্টা করেছি।

এইচটিএমএল

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

সিএসএস

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

আপনি এটি জেএসফিডেলে সরাসরি দেখতে পাবেন

Answer 12

বুটস্ট্র্যাপ 3 ব্যবহার করে আমি সমান প্রস্থের 3 ডিভ তৈরি করি (12 টি কলাম বিন্যাসে প্রতিটি স্তরের 4 টি কলাম)। বাম / ডান বিভাগগুলির বিভিন্ন প্রশস্ততা থাকলেও (যদি তারা তাদের কলামের স্থান উপচে না ফেলে) তবে আপনি আপনার কেন্দ্রীয় অঞ্চলকে কেন্দ্রিক রাখতে পারেন।

এইচটিএমএল:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

সিএসএস:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

লাইব্রেরি ছাড়াই সেই কাঠামোটি তৈরি করতে আমি বুটস্ট্র্যাপ সিএসএস থেকে কিছু নিয়ম অনুলিপি করেছি।

এইচটিএমএল:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

সিএসএস:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

Answer 13

আমি যখন কেন্দ্রের উপাদান হিসাবে কোনও চিত্র দিয়ে এটি করলাম তখন আমাকে গ্রহণযোগ্য উত্তরে যে পরিবর্তনগুলি করতে হয়েছিল তা এখানে :

1. নিশ্চিত করুন যে চিত্রটি একটি ডিভের মধ্যে আবদ্ধ রয়েছে ( #centerএই ক্ষেত্রে)। যদি এটি না হয় তবে আপনাকে সেট displayকরতে blockহবে এবং এটি ভাসমান উপাদানগুলির মধ্যে স্থানের সাথে সম্পর্কযুক্ত বলে মনে হচ্ছে।

2. চিত্র এবং এর ধারক উভয়ই আকার নির্ধারণ করতে ভুলবেন না :

   #center {
       margin: 0 auto;
   }
   
   #center, #center > img {
       width: 100px;
       height: auto;
   }

Answer 14

আপনি এটি চেষ্টা করতে পারেন:

আপনার এইচটিএমএল কোড এর মত:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

এবং আপনার সিএসএস কোড:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

সুতরাং, এর আউটপুটটি এ জাতীয় হওয়া উচিত:

[[LEFT]       [CENTER]        [RIGHT]]

Answer 15

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

Comments

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

— হেরেটিক বানর

Answer 16

আপনি এটি সঠিকভাবে করেছেন, আপনার কেবল আপনার ফ্লোটগুলি সাফ করা দরকার need সহজভাবে যুক্ত করুন

overflow: auto; 

আপনার ধারক শ্রেণিতে।

Answer 17

সবচেয়ে সহজ সমাধানটি হ'ল 3 টি কলাম সহ একটি টেবিল ক্র্যাট করা এবং সেই সারণিকে কেন্দ্র করা।

এইচটিএমএল:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

Answer 18

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

Comments

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

— মার্টিজন পিটারস