পাশাপাশি দুটি ডিভস - ফ্লুয়েড ডিসপ্লে

Question

আমি পাশাপাশি দুটি ডিভস রাখার চেষ্টা করছি এবং এর জন্য নিম্নলিখিত সিএসএস ব্যবহার করছি।

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

এইচটিএমএল সহজ, দুটি একটি বাম এবং ডানদিকে একটি র‌্যাপার ডিভ।

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

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

সুতরাং, কোডটি প্রথম নজরে সূক্ষ্মভাবে কাজ করে। সমস্যাটি হ'ল, আমি প্রস্থের (%) বৃদ্ধির সাথে বাম ডিভটি স্বয়ংক্রিয়ভাবে প্যাডিং / মার্জিন পেয়ে যায়। সুতরাং, 65% প্রস্থে, বাম ডিভের কিছু প্যাডিং বা মার্জিন রয়েছে এবং ডান ডিভের সাথে পুরোপুরি সাজানো হয়নি, আমি প্যাডিং / মার্জিন 0 করার চেষ্টা করেছি তবে ভাগ্য নেই। দ্বিতীয়ত, আমি পৃষ্ঠায় জুম করলে ডান দিকের ডিভটি বাম দিকের ডিভের নীচে স্লাইড হয়, এটি তরল প্রদর্শন নয় display

দ্রষ্টব্য: আমি দুঃখিত, আমি অনেক অনুসন্ধান করেছি। এই প্রশ্নটি অনেকবার জিজ্ঞাসা করা হয়েছে তবে সে উত্তরগুলি আমাকে সহায়তা করছে না। আমার ক্ষেত্রে সমস্যাটি কী তা আমি ব্যাখ্যা করেছি।

আমি আশা করি এর জন্য একটা ঠিক আছে।

ধন্যবাদ.

সম্পাদনা: দুঃখিত, আমার এইচটিএমএল সমস্যা, বাম এবং ডানদিক উভয় দিকে দুটি "বক্স" ডিভ ছিল, তাদের% প্যাডিং ছিল, সুতরাং বাম দিক আরও প্রস্থের কারণে আরও প্যাডিং দেখিয়েছিল। দুঃখিত, উপরের সিএসএস নিখুঁত কাজ করে, এর তরল প্রদর্শন এবং স্থির, ভুল প্রশ্ন জিজ্ঞাসা করার জন্য দুঃখিত ...

Comments

দুটি বক্স ডিভ ছিল? একটি বাক্স ডিভ কি? এই প্রশ্নটি পরিষ্কার নয়।

— জন কেটেজিক

Answer 1

পরিবর্তে এর মতো একটি সিস্টেম চেষ্টা করুন:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

আপনি কেবলমাত্র প্রথমদিকে দ্বি প্রস্থের সমান অন্য প্রান্তে মার্জিন-বাম ব্যবহার করলে আপনার কেবল একটি ডিভ ভাসতে হবে। এটি জুম যাই হোক না কেন এটি কাজ করবে এবং উপ-পিক্সেল সমস্যা নেই।

Comments

এটি কোনও সহায়তা করছে না, জুমিং জিনিসটি এখন ঠিক করা হয়েছে, এটি স্থির করে বলেছে, তবে ডান ডিভটি এখন স্লাইড হয়ে সেই অবস্থানে স্থির হয়েছে

— ওয়ালিদ

আপনি সম্ভবত কিছু গণ্ডগোল করেছেন, আপনার কোডটি দেখুন বা আমাকে jsFizz এর লিঙ্কটি বলুন এবং এতে খারাপ চেহারা দেখুন look

— dezman

আফসোস, আমি দুঃখিত। ডিভগুলি আমার উপরের সিএসএস দ্বারা ইতিমধ্যে ঠিক করা হয়েছিল যা আমি দিয়েছিলাম, এটির "বাক্স" ডিভগুলি উভয় বাম এবং ডানদিকে প্যাডিং এবং মার্জিন ছিল%, কারণ ডান ডিভ সংক্ষিপ্ত ছিল কেন, এটি এনকোয়াল প্যাডিং এবং মার্জিন ছিল had দুঃখিত ...

— ওয়ালিদ

পরিবর্তে <section>হওয়া উচিত নয় <div>?

— jvriesem

Answer 2

এটি একটি ফ্লেক্সবক্সের সাহায্যে সহজ:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Comments

দুর্দান্ত, ফ্লেক্সবক্স অবশ্যই যাওয়ার উপায়

— জুলিয়ান

এই সাইট অনুসারে, ফ্লেক্সটি ব্রাউজারগুলির 94% এ কাজ করা উচিত। caniuse.com/#search=flex

— এড্রিয়ান

@ জাস্টস যে বিভিন্ন ব্রাউজারের ৯৯% উপলব্ধ নেই (এটি সর্বদা ক্রোম, মজিলা, আই ইত্যাদি ইত্যাদিতে কাজ করে), ব্রাউজার নির্বিশেষে এটি 94% সময় কাজ করে না?

— জো

বর্তমানে এটি 97 +% এ দাঁড়িয়েছে। মূলত, আমি বলব যদি আপনার IE8 টার্গেট করার দরকার না হয় তবে এই ক্ষেত্রে এবং অন্যদের মধ্যে ফ্লেক্সবক্সের সাথে যান। ফ্লেক্সবক্স সমাধানগুলি প্রায়শই আরও মার্জিত এবং এর পক্ষে যুক্তিযুক্ত হতে সহজ।

— অ্যালান টমাস

আপনার যদি কোনও বিদ্যমান ওয়েবসাইট থাকে তবে ব্রাউজার ভাগ করে কখনও যাবেন না, নিজের ট্র্যাফিক লগগুলি দেখুন। আমার বেশিরভাগ সাইটে, আই 8 কেবলমাত্র 0.01% ট্র্যাফিকের জন্য অ্যাকাউন্ট দেয়। তবে ... আমি নির্দিষ্ট সাইটগুলি দেখেছি যেখানে শ্রোতারা প্রচুর উত্তরাধিকারী সফ্টওয়্যার ব্যবহার করে কর্পোরেশন, সরকারী, বা অলাভজনক সংস্থাগুলির ব্যবহারকারী এবং তারপরে পুরানো IE ব্রাউজারের ব্যবহার আশ্চর্যজনকভাবে বেশি হতে পারে high

— Cazort

Answer 3

আমার বর্তমান সাইটের জন্য এই সিএসএস ব্যবহার করে। এটি নিখুঁত কাজ করে!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Comments

আপনি নিজের উত্তর খুঁজে পেয়েছেন এবং গ্রহণ করেছেন শুনে খুশি, তবে # পাশ কী? এটি আপনার মূল প্রশ্নে নেই।

— জেএমডি

ভাসা ব্যবহার: উভয় সন্তানের বাম দিকে (# ডান) পিতামাতার ডিভ (# রেকার) এর উচ্চতা হরণ করবে। সুতরাং এই সমাধান প্রয়োজনীয়তার উপর নির্ভর করে। কেবলমাত্র একটি সন্তানের উপর ভাসা দেওয়া ভাল ((আপনার ক্ষেত্রে # বাম)

— রাহুল গান্ধী

Answer 4

গুগলিং যারা তাদের জন্য এখানে আমার উত্তর:

সিএসএস:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

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

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

Answer 5

উভয় ডিভটি এভাবে তৈরি করুন। এটি উভয় ডিভাইস পাশাপাশি পাশাপাশি প্রান্তিককরণ করবে।

.my-class {
  display : inline-flex;
} 

Answer 6

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Comments

উপচে পড়ার কারণ কী: গোপন? এটি প্রয়োজনীয় বলে মনে হচ্ছে না ...

— হনজা

Answer 7

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

মার্জিন-রাইট যদিও প্রয়োজন হয় না।