পাশাপাশি এই দুটি ডিভস কীভাবে পাবেন?

110

আমার দুটি ডিভ রয়েছে যা নীড়যুক্ত নয়, একটির নীচে। তারা উভয়ই একটি পিতা বা মাতৃকার দ্বীপের মধ্যে থাকে এবং এই পিতামহক ডিভটি পুনরায় পুনরায় পুনরায় পুনরুক্ত হয়। তাই মূলত:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

আমি প্রতিটি জোড়া child_div_1এবং child_div_2একে অপরের পাশে পেতে চাই । কিভাবে আমি এটি করতে পারব?

css layout html

— জাস্টিন মেল্টজার
সূত্র

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Http://jsfiddle.net/c6242/1/ এ কাজের উদাহরণ পরীক্ষা করুন

— হুসাইন
সূত্র

1

তিনি চান যে বাচ্চারা একে অপরের পাশে জড়িত হোক, বাবা-মা নয় (অন্তত এটি আমার বোঝা ছিল ...)

— এডিডিভি

4

আমি এখনও ভাবি display: table-cellযে তার অর্থ কী নিকটে ফলাফল পাবে (তার পর থেকে তাদের সমান উচ্চতা ইষ্টেটের থাকবে) তবে এই উপায়টি অবশ্যই কার্যকর হবে।

— এএইচডিভি

@ehdv আই 6 আই 7 display: table-cellসমর্থন করে না। float: left; এটি করার সঠিক উপায়।

— হুসেন

আসলে আই 6 ,,7 এ করার যথাযথ উপায়টি হ'ল <tr><td>, কারণ ব্যবহারকারী যখন উইন্ডোটিকে পুনরায় আকার দেয় তখন অন্য কোনও বিকল্প ভাঙবে। আধুনিক ব্রাউজারগুলিতে display: inline-blockসাধারণত সর্বোত্তম বিকল্প।

— জন হেন্কেল

126

যেহেতু ডিভের ডিফল্টরূপে blockউপাদানগুলি থাকে - এর অর্থ তারা সম্পূর্ণ উপলব্ধ প্রস্থকে দখল করবে, ব্যবহার করার চেষ্টা করুন -

display:inline-block;

divএখন অনুষ্ঠিত হয় ইনলাইন অর্থাত উপাদানের প্রবাহ ব্যাহত করে না, কিন্তু এখনও একটি ব্লক উপাদান হিসেবে গণ্য করা হবে।

এই কৌশলটি আমি floatএস এর সাথে কুস্তি করার চেয়ে সহজ মনে করি ।

আরও টিউটোরিয়ালটি দেখুন - http://learnlayout.com/inline- block.html । আমি এমনকি পূর্ববর্তী নিবন্ধগুলিতে সুপারিশ করব যা সেগুলি পর্যন্ত নিয়ে যায়। (না, আমি এটি লিখিনি)

— রবিন মাবেন
সূত্র

আমি এই সমাধানটি সত্যিই পছন্দ করেছি। এটির সাথে আমার একমাত্র সমস্যা হ'ল উপরের প্রান্তিককরণের পরিবর্তে উভয় ডিভের নীচে সারিবদ্ধ করা। এটির জন্যও কি দ্রুত সেটিং আছে?

— ক্রিস

আমি divসমান উচ্চতা সম্পন্ন 2 টি র‍্যাপার ব্যবহার করার পরামর্শ দেব যাতে তাদের ভিতরে থাকা সামগ্রীটি শীর্ষ-সারিবদ্ধ বলে মনে হয়।

— রবিন মাবেন

2

আমি রাজী. এটি float:leftআপনার পুরো লেআউটটিকে নতুন করে সংজ্ঞায়িত না করে আপনাকে আরও অনেক বিকল্প দেয় কারণ এটি অনেক ভাল । বিষয়গুলি এইভাবে "কেবলমাত্র কাজ করে"। এটি এখানে দেখুন: jsfiddle.net/SrAQd/4

— জেরি

12

উল্লম্ব সারিবদ্ধতা পেতে আমি "উল্লম্ব-সারিবদ্ধ: শীর্ষ;" যুক্ত করব

— cdiggins

@ ক্রিস: হ্যাঁ, আমি সিডিজিনগুলির সাথে একমত এটা আপনাকে সাহায্য করা উচিত।

— রবিন মাবেন

44

আমি নীচের কোডটি খুব দরকারী খুঁজে পেয়েছি, এটি যে কেউ এখানে অনুসন্ধানে আসতে সহায়তা করতে পারে

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

স্নিপেট প্রসারিত করুন

— axs
সূত্র

11

ফ্লেক্সবক্স ব্যবহার করে এটি অত্যন্ত সহজ!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

ঝাঁঝরি উদাহরণ

— সূর্যদেব
সূত্র

6

স্টাইল ব্যবহার করে

.child_div_1 {
    float:left
}

— amit_g
সূত্র

5

সেরা যে আমার জন্য কাজ করে:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
সূত্র

2

float:leftশিশু ডিভ ক্লাসে ব্যবহারকারীর সম্পত্তি

ডিভ স্ট্রাকচারের জন্য বিশদটি পরীক্ষা করুন : http://www.dzone.com/links/r/div_table.html

— প্রণয় রানা
সূত্র

2

ফ্লেক্সবক্স ব্যবহার করা

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
সূত্র