<div> উপাদান পাশাপাশি পাশাপাশি সারিবদ্ধ করুন

Question

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

যাইহোক, আমি এই দুটি বোতাম পাশাপাশি থাকতে চাই। প্রান্তিককরণ দিয়ে কী করা দরকার তা আমি সত্যিই বুঝতে পারি না।

এইচটিএমএল এখানে

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

সিএসএস এখানে

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

Comments

কেবল শিরোনামটি পড়ে প্রথম যেটি মনে আসে তা হ'লfloat:left;

— JCOC611

@ জেসিওসি 611: float:left;উভয়ের ক্ষেত্রে আবেদন করা divএটি পুরোপুরি করেছে। আপনি কি উত্তর হিসাবে আপনার মন্তব্য পোস্ট করতে পারেন? ধন্যবাদ!

— sudo rm -rf

এবং দ্বিতীয়টি display: inline-block;কিন্তু এটির চেয়ে কম সমর্থন রয়েছে ...

— জেভি

ভাসা: একটি পাত্রে ভিতরে বাম কাজ করবে তবে আমি বোতামগুলির জন্য <ডিভ> এস এর পরিবর্তে দুটি <span> ট্যাগ ব্যবহার করার চেষ্টা করব।

— শিফটিকো

ইতিমধ্যে উল্লিখিত হিসাবে, ভাসা যোগ: বাম; # বিবি বাটন এবং # ব্যাগলারি বাটনে, তারপরে পরিষ্কার সহ আরও একটি উপাদান যুক্ত করুন: উভয়; ভাসমান সাফ করতে। <a> মোড়ানোর জন্য ডিভস (ব্লক উপাদানগুলি) কেন ব্যবহার করছেন?

— লুডসাইন

Answer 1

float:left;আপনার উভয় ডিভগুলিতে প্রয়োগ করুন তাদের পাশাপাশি দাঁড়ানো উচিত।

Comments

আমি কি ভুল করছি, clear:both;না কোথাও toোকা দরকার? আমি কখনই সিএসএসের সাওয়ান্ট হয়ে উঠিনি তবে ক্লিয়ারগুলি দেখার জন্য ভাসমানগুলি দেখলে আমি সাধারণ বলে মনে করি।

— ব্র্যাড ক্রিস্টি

clear:bothঠিক বিপরীত কাজ করবে। "ভাসমান উপাদানগুলির পরে উপাদানগুলি এর চারপাশে প্রবাহিত হবে this এড়াতে, পরিষ্কার সম্পত্তিটি ব্যবহার করুন" "

— JCOC611

@ জেসিওসি 11১১: আহ, এতক্ষণ পরিষ্কার আপনি যখন একটি ক্ষণিক ভাসা সামর্থ্য চান তা অনুসরণ করে? বোধ হয়। পাঠের জন্য ধন্যবাদ। ;-)

— ব্র্যাড ক্রিস্টি

কেবল "স্পষ্ট", (ভয়াবহ, আমি জানি) হতে, আপনার <br style="clear: both;" />যদি এমন কোন তৃতীয় ডিভ থাকে যা আপনি দু'এর সাথে সংযুক্ত ছিল তার নীচে চেয়েছিলেন you

— তাস

@ তাসের আপনার কেবল মাত্র তৃতীয় ডিভ প্রয়োজন: <div style="clear: both;">...</div>(কোনও বিআর প্রয়োজন নেই)

— ইন্ট্রিপিডিস

Answer 2

সাবধান float: left... 🤔

… উপাদান পাশাপাশি পাশাপাশি সারিবদ্ধ করার জন্য অনেক উপায় আছে।

নীচে দুটি উপাদান পাশাপাশি পাশাপাশি অর্জনের সবচেয়ে সাধারণ উপায় রয়েছে ...

ডেমো: কোডেপেনে নীচের সমস্ত উদাহরণ দেখুন / সম্পাদনা করুন

---

নীচের সমস্ত উদাহরণের জন্য প্রাথমিক শৈলী ...

এই উদাহরণগুলিতে কিছু প্রাথমিক সিএসএস শৈলী parentএবং childউপাদানসমূহ:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

---

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

এইচটিএমএল

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

CSS

.float-left-child {
  float: left;
}

---

এইচটিএমএল

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

---

দ্রষ্টব্য : ডিভ ট্যাগগুলির মধ্যে স্থানটি সরিয়ে এই দুটি শিশু উপাদানগুলির মধ্যে স্থান সরিয়ে নেওয়া যেতে পারে:

এইচটিএমএল

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

---

এইচটিএমএল

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

CSS

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

---

এইচটিএমএল

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.inline-flex-parent {
  display: inline-flex;
}

---

এইচটিএমএল

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}

---

Comments

হ্যাঁ, তবে শুনেছি inline-blockকিছু ব্যবহারের সামঞ্জস্যের সমস্যা রয়েছে। এছাড়াও, যে ওভার ব্যবহার করে কোন সুবিধা float?

— sudo rm -rf

হ্যাঁ, inline-blockএটি আরও নতুন, সুতরাং আপনার টার্গেট ব্রাউজারগুলি এখনও এটি সমর্থন না করতে পারে (যদিও এখানে অনেকগুলি ব্রাউজার-নির্দিষ্ট বৈশিষ্ট্য রয়েছে এবং এর জন্য কার্যপ্রণালীও রয়েছে)। সুবিধাটি হ'ল এতে থাকা উপাদান উপাদানগুলিকে মুড়িয়ে দেবে; এর সাথে floatআপনাকে প্যারেন্ট উপাদানগুলিতে সিএসএস যুক্ত করতে হবে।

— বিউ স্মিথ

Answer 3

সহজবোধ্য রাখো

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>