একে অপরের পাশে কীভাবে দুটি ডিভ রাখবেন?

370

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

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

আমি চাই যে দুটি ডিভগুলি র‌্যাপার ডিভের মধ্যে একে অপরের পাশে থাকবে। এই ক্ষেত্রে, সবুজ ডিভের উচ্চতাটি মোড়কের উচ্চতা নির্ধারণ করা উচিত।

আমি কীভাবে সিএসএসের মাধ্যমে এটি অর্জন করতে পারি?

css html

— মিশা মোরোস্কো
সূত্র

5

এছাড়াও: stackoverflow.com/questions/446060/...

— radek

14

#wrapper { display: flex; }

— icl7126

একে অপরের পাশে সিএসএস দুটি ডিভের

— আলেকজান্ডার

447

একটি বা উভয় অভ্যন্তর ডিভগুলি ভাসা করুন।

ভাসমান এক ভাগ:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

অথবা যদি আপনি উভয়ই ভাসান, আপনার ভাসমান বাচ্চাদের উভয়ই রাখার জন্য মোড়ক ডিভকে উত্সাহিত করতে হবে, বা এটি খালি মনে হবে এবং তাদের চারপাশে সীমানাটি রাখবে না

ভাসমান উভয় ডিভ:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

— clairesuzy
সূত্র

2

আপনি overflow:auto# র‍্যাপারে সেট করতে পারেন তাই আকারটি এখনও সামগ্রীর আকারের সাথে মানিয়ে নিতে পারে। (পরিষ্কারের প্রয়োজন ছাড়াই: উভয় উপাদান)

— মেও

হ্যাঁ উদাহরণস্বরূপ, যদি # ফার্স্ট দীর্ঘ হয় তবে আপনি অবশ্যই 101 ফ্ল্যাট ফ্লোট সমেত থাকতে পারবেন;) .. # সেকেন্ডে লুকানো ওভারফ্লো বাম মার্জিন গণনা করার প্রয়োজনকে এড়িয়ে চলেছে অন্যথায় সমাধানগুলি মূলত একই

— ক্লায়ারসুজি

3

একদম ঠিক! আমি মার্জিনটি গণনা করতে চাই না। overflow: hiddenএখানে একটি দুর্দান্ত কাজ করে! তবে এটি আমার কাছে এখনও এক ধরণের যাদু। আমি ভেবেছিলাম যে বিষয়বস্তুটি তার ধারকটি ফিট না করে তবে এটি লুকিয়ে রাখাoverflow: hidden উচিত । তবে, এখানে আচরণ কিছুটা আলাদা। আপনি দয়া করে বিস্তারিত বলতে পারেন?

— মিশা মোরোস্কো

4

overflowসম্পত্তি সাফ করবে floats উভয় উল্লম্ব এবং অনুভূমিক যার কারণে আমার প্রথম উদাহরণে, #secondবাম মার্জিন দরকার নেই, ওভারফ্লো সম্পত্তি যতদিন এটা মান হিসেবে কাজ করে নয় visible.. আমি যদি পরিস্থিতিতে তাই তাদের জন্য স্বয়ংক্রিয় লুকানো পছন্দ কোনও স্ক্রোল বার দুর্ঘটনাক্রমে উত্পন্ন হয় না (যা স্বয়ংক্রিয়ভাবে ঘটবে) .. কোনও উপায়ে কোনও দৃশ্য লুকানো থাকবে না কারণ এটি আপনার 500px প্রস্থের বাইরে গেলে তবে যতক্ষণ না উচ্চতার কোনও সামগ্রী থাকবে না প্রস্থের মধ্যে স্বাভাবিক হিসাবে মোড়ানো .. কোনও আড়াল করা নেই;)

— ক্লায়ারসুজি

1

ওভারফ্লো: # র‍্যাপারে লুকানো # ফার্স্ট ফ্লোটটি উল্লম্বভাবে আটকে থাকা # সেকেন্ড ডিভের চেয়ে দীর্ঘতর হওয়া উচিত vert # সেকেন্ডে দ্বিতীয় ওভারফ্লো প্রথম ভাসমানের পাশের সামগ্রীটি সরবরাহ করে, অনুভূমিকভাবে অন্যথায় এটি প্রথম ফ্লোটের নীচে যাবে। ওভারফ্লো সম্পত্তির বর্ধিত আচরণটি সিএসএস ২.১ এর কোথাও পর্যায়ক্রমে হয়েছিল, স্পেসিফিকগুলি নিজেই কোনও ক্লিয়ারিং উপাদান বা ক্লিয়ারফিক্স হ্যাক ছাড়াই ভাসমান রাখার উপায়ের প্রতিক্রিয়াতে পরিবর্তিত হয়েছিল, এটি প্রযুক্তিগত শব্দটি হ'ল এই জাতীয় ব্যবহারের ফলে এটি একটি নতুন সৃষ্টি করে ব্লক ফর্ম্যাটিং প্রসঙ্গে

— ক্লায়ারসুজি

130

দু'দিক ভাগ,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

আপনি displayসম্পত্তি ব্যবহার করতে পারেন :

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFood উদাহরণ এখানে ।

যদি div1একটি নির্দিষ্ট উচ্চতা অতিক্রম করে তবে নীচে div2পাশে স্থাপন করা হবে div1। এটি সমাধান করার জন্য, ব্যবহার vertical-align:top;করুন div2।

jsFood উদাহরণ এখানে ।

— jim_kastrin
সূত্র

@ গ্রহণযোগ্য উত্তরগুলির পরেও ভাসমান সম্পত্তি ব্যবহার করা হয়, যা প্রধান ব্রাউজারগুলির প্রদর্শন সম্পত্তি থেকে আগে সমর্থিত ছিল। ক্রোম v1.0 থেকে ভাসা এবং v4.0 থেকে প্রদর্শন সমর্থন করে। এটি গ্রহণের সময় সম্ভবত গ্রহণযোগ্য উত্তরটি আরও পিছনের দিকে সামঞ্জস্যপূর্ণ ছিল।

— jim_kastrin

5

এই সমাধানটিতে একটি বিরক্তিকর সমস্যা রয়েছে: যেহেতু divতৈরি হয়inline আপনাকে আপনার এইচটিএমএলে কোনও ফাঁকা স্থান, নতুন লাইন ইত্যাদি রাখতে হবে না। অন্যথায়, ব্রাউজারগুলি তাদের মধ্যে একটি স্থান সরবরাহ করবে। এই ফিডলটি দেখুন : আপনি যদি উভয়কে divএকই লাইনে রাখতে না পারেন তবে যদি না আপনি তাদের ট্যাগগুলিকে কিছু না রেখে রেখে দেন।

— আলেকজান্ডার অ্যাবাকুমভ

30

আপনি সিএসএস ফ্লোট সম্পত্তি ব্যবহার করে একে অপরের পাশে বসতে পারেন:

#first {
float: left;
}
#second {
float: left;
}

আপনার অবশ্যই তা নিশ্চিত করতে হবে যে মোড়ক ডিভটি প্রস্থের দিক থেকে ভাসমান এবং মার্জিন ইত্যাদি সঠিকভাবে সেট হয়েছে কিনা তা নিশ্চিত করে।

— জেমস
সূত্র

17

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

লাইভ জসফিডল

সিএসএস:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

ডিফল্ট দিকটি সারি। সুতরাং, এটি # র‍্যাপারের ভিতরে একে অপরের পাশে সারিবদ্ধ হয়। তবে এটি IE9 বা সেই সংস্করণগুলির চেয়ে কম সমর্থিত নয়

— মোঃ রফি
সূত্র

1

এটি ব্যবহার করা কত সহজ তা আমি বিশ্বাস করতে পারি না flex। ধন্যবাদ!

— স্যাম

16

সমাধান এখানে:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

আপনার ডেমো আপডেট হয়েছে;

http://jsfiddle.net/dqC8t/1/

— Meo
সূত্র

ধন্যবাদ। আমি বাদ overflow: auto;দিলে এটি এখনও কাজ করে। যেখানে এটি প্রয়োজন সেখানে আপনি একটি উদাহরণ দিতে পারেন?

— মিশা মোরোশকো

হ্যাঁ নিশ্চিত: ওভারফ্লো অটোটি সরিয়ে ফেলুন এবং প্রথমে আর দ্বিতীয়টির বিষয়বস্তু তৈরি করুন, আপনি ভালভাবে দেখতে পাবেন যে ধারকটির

— Meo

ঠিক আছে, আমি দেখছি, ধন্যবাদ! যাইহোক, আমি পছন্দ করি না margin: 0 0 0 302px;কারণ এটি নির্ভর করে width: 300px;। যা হোক ধন্যবাদ!!

— মিশা মোরোশকো

যদি আপনি আপনি আমি আপনার দ্বিতীয় DIV আছে জন্য প্রস্থ নির্ধারণ করুন এটি প্রয়োজন আত

— Meo

15

বিকল্প 1

float:leftউভয় divউপাদান ব্যবহার করুন এবং 100% এর সম্মিলিত মোট প্রস্থ সহ উভয় ডিভ উপাদানগুলির জন্য একটি% প্রস্থ নির্ধারণ করুন।

box-sizing: border-box;ভাসমান ডিভ উপাদানগুলিতে ব্যবহার করুন। মান সীমানা-বাক্স প্যাডিং এবং সীমানাকে প্রসারিত করার পরিবর্তে প্রস্থ এবং উচ্চতায় সীমাবদ্ধ করে।

<div id="wrapper">ভাসমান শিশু উপাদানগুলি সাফ করার জন্য ক্লিয়ারফিক্স ব্যবহার করুন যা সঠিক উচ্চতায় মোড়ক ডিভ স্কেল তৈরি করবে।

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

বিকল্প 2

position:absoluteএকটি উপাদান এবং অন্য উপাদান একটি নির্দিষ্ট প্রস্থ ব্যবহার করুন।

আপেক্ষিক: অবস্থান যোগ করুন <div id="wrapper">করতে সন্তান উপাদান উপাদান একেবারে অবস্থান <div id="wrapper">উপাদান।

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

বিকল্প 3

display:inline-blockউভয় divউপাদান ব্যবহার করুন এবং 100% এর সম্মিলিত মোট প্রস্থ সহ উভয় ডিভ উপাদানগুলির জন্য একটি% প্রস্থ নির্ধারণ করুন।

এবং আবার ডিভ উপাদানগুলিতে float:leftব্যবহার box-sizing: border-box;করুন ( উদাহরণ হিসাবে একই ) । মান সীমানা-বাক্স প্যাডিং এবং সীমানাকে প্রসারিত করার পরিবর্তে প্রস্থ এবং উচ্চতায় সীমাবদ্ধ করে।

দ্রষ্টব্য: এইচটিএমএল মার্কআপে ফাঁকা স্থানগুলি প্রভাবিত হওয়ায় ইনলাইন-ব্লক উপাদানগুলির স্পেসিং সমস্যা থাকতে পারে। এখানে আরও তথ্য: https://css-tricks.com/fighting-the-space-between-inline- block-eferences/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

একটি চূড়ান্ত বিকল্প হ'ল ফ্লেক্স নামের নতুন ডিসপ্লে বিকল্পটি ব্যবহার করা হবে তবে নোট করুন যে ব্রাউজারের সামঞ্জস্যতা প্লে করতে আসতে পারে:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

— জাকো বাসন
সূত্র

1

একমত; floatআমার নৌকা ভাসাবেন না inline-blockস্কচ। (দুঃখিত।)

— স্টিভসিংক

7

একে অপরের সামনে দুটি ডিভ রাখার জন্য কোড পরিবর্তনের নীচে ব্যবহার করার চেষ্টা করুন

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

জেএসফিডাল লিংক

— Shailesh
সূত্র

7

এটি খুব সহজ - আপনি এটি হার্ড উপায়ে করতে পারেন

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

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

বা সহজ উপায়

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

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

আরও এক মিলিয়ন উপায় আছে।
তবে আমি কেবল সহজ উপায় দিয়েছিলাম। আমি আপনাকে এটিও বলতে চাই যে এখানে প্রচুর উত্তরগুলি ভুল তবে দুটি উপায় যে আমি কমপক্ষে এইচটিএমএল 5 এ কাজ করে দেখিয়েছি।

— রানিংম্যান স্টুডিওস
সূত্র

5

এটি সঠিক CSS3 উত্তর। আশা করি এটি আপনাকে এখন কোনওভাবে সহায়তা করবে: ডি আমি আপনাকে সত্যিই বইটি পড়ার পরামর্শ দিচ্ছি: https://www.amazon.com/Book-CSS3- ডেভেলপারস- ভবিষ্যত- ডিজাইন / ডিপি / 1593272863 আসলে আমি এখন এই বইটি পড়ে এই সমাধানটি তৈরি করেছি । : ডি

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

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

— মার্টিন ক্রাজারোভিč č
সূত্র

3

float:left;উভয় ডিভাইসে সম্পত্তি যুক্ত করুন ।
যোগ display:inline-block;সম্পত্তি।
display:flex;পিতামহী বিভাগে সম্পত্তি যুক্ত করুন ।

— বন্ধু
সূত্র

2

আমার পদ্ধতি:

<div class="left">Left</div>
<div class="right">Right</div>

সিএসএস:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

— sNICkerssss
সূত্র

0

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

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

— অক্ষিত আহুজা
সূত্র

0

উপাদান UI এবং react.js এ আপনি গ্রিড ব্যবহার করতে পারেন

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>

— পেড্রো জেআর
সূত্র