2 কলাম ডিভ লেআউট: স্থির প্রস্থ, বাম তরল সহ ডান কলাম

Question

আমার প্রয়োজনীয়তা সহজ: 2 টি কলাম যেখানে ডানদিকে একটি নির্দিষ্ট আকার থাকে । দুর্ভাগ্যক্রমে আমি কোনও কার্যকর সমাধান খুঁজে পাইনি, না স্ট্যাকওভারফ্লোতে এবং না গুগলে। আমি বর্ণিত প্রতিটি সমাধান ব্যর্থ হয় যদি আমি আমার নিজস্ব প্রসঙ্গে প্রয়োগ করি। বর্তমান সমাধানটি হ'ল:

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

উপরের কোড সহ আমি নিম্নলিখিতটি পেয়েছি:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

দয়া করে উপদেশ দাও. অনেক ধন্যবাদ!

Answer 1

বাম কলামে ভাসাটি সরান।

এইচটিএমএল কোডে, বাম দিকের আগে ডান কলামটি আসা উচিত।

ডানদিকে যদি ভাসমান (এবং প্রস্থ) থাকে এবং বাম কলামটির প্রস্থ না থাকে এবং কোনও ভাসা না থাকে তবে এটি নমনীয় হবে :)

এছাড়াও overflow: hiddenবাইরের ডিভের জন্য একটি এবং কিছু উচ্চতা (স্বয়ংক্রিয় হতে পারে) প্রয়োগ করুন, যাতে এটি উভয় অভ্যন্তরের ডিভকে ঘিরে থাকে।

অবশেষে, বাম কলামে, একটি যুক্ত করুন width: autoএবং overflow: hiddenএটি বাম কলামটি ডানদিক থেকে স্বতন্ত্র করে তোলে (উদাহরণস্বরূপ, আপনি যদি ব্রাউজার উইন্ডোটিকে পুনরায় আকার দিয়েছেন এবং ডান কলামটি এই বৈশিষ্ট্যগুলি ছাড়াই বামদিকে স্পর্শ করে, বাম কলামটি চলবে ডান দিকের চারদিকে, এই বৈশিষ্ট্যগুলির সাথে এটি তার স্পেসে থাকবে)।

এইচটিএমএল উদাহরণ:

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

সিএসএস:

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

এখানে উদাহরণ: http://jsfiddle.net/jackJoe/fxWg7/

Comments

@Mir একটি clear: both ভিতরে কলামের কোনো বাহিরে ভাসে প্রভাবিত করবে না। এটি "ভঙ্গুর" নয় যদি আপনি কলামগুলির মধ্যে কলামগুলির একই স্তরে পরিষ্কার না রাখেন , যদি আপনি এটি শেষে রাখেন তবে কোনও ক্ষতি হয় না।

— জ্যাকজয়ে

আমি আদমের উদাহরণ ব্যবহার করে বিবেচনা করব consider আমি মনে করি না যে এইচটিএমএল মার্কআপে বাম কলামের আগে ডান কলামটি রাখা ভাল ধারণা।

— ড্যানি_জরিস

@ ড্যানি_জরিস আমি সম্মত এছাড়াও, আপনি যদি মিডিয়া ক্যোয়ারী ব্যবহার করেন তবে এখন বাম কলামের নীচে ডান কলামটি

— চাপানো

যারা এটা কিভাবে কাজ করে সে সম্পর্কে জানতে আগ্রহী হয়, একটি ব্যাখ্যা এখানে পাওয়া যাবে: stackoverflow.com/questions/25475822/...

— হাশেম Qolami

আমি ভাবছি বামদিকে ডান কলামের কোনও উপায় আছে কিনা, যাতে এটি সঠিকভাবে স্ট্যাক হয় (ফ্লেক্সবক্স ব্যবহার না করে)

— ডমিনিক

Answer 2

দেখুন http://www.alistapart.com/articles/negativemargins/ , আপনার ঠিক এটি প্রয়োজন ( উদাহরণ 4 এখানে) 4

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

---

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

Comments

চমত্কার, সহজ সমাধান এবং সঠিক এইচটিএমএল অর্ডারও রাখে!

— ব্যবহারকারী 1794295

এটি গ্রহণযোগ্য সমাধানের চেয়ে ভাল কারণ মার্কআপটি সঠিক ক্রমে রয়েছে।

— পেট্রি লেহটিনেন

আমি এই সম্পর্কে জানতাম না। আমি এই সম্পর্কে কিভাবে জানতাম না। পারফেক্ট! আমি পুরো 'তরল ইনপুট, স্থির-প্রস্থের অনুসন্ধানের বোতাম' করার চেষ্টা করেছি এবং স্পষ্টতই উত্সের ক্রমটি এখানে গুরুত্বপূর্ণ। এই এটি নখ। ধন্যবাদ!

— ম্যালবার ফ্রন্টটি

আমি এই সমাধানটি পছন্দ করি কারণ মোবাইল ব্রেক ব্রেকপয়েন্ট সময়ে ডান কলাম / সাইডবারটি বাম কলামের সামগ্রীর উপরে নয় নীচে প্রদর্শিত হবে।

— দাগেস্টেটিং.নেট

এই পদ্ধতিটি দিয়ে শীর্ষে যাওয়ার জন্য আমি সঠিক কলামটি পাইনি।

— মুল্লাউসসেন

Answer 3

বামের আগে ডান কলাম স্থাপন করা এড়াতে সেরা, কেবল নেতিবাচক ডান-মার্জিন ব্যবহার করুন।

এবং @ মিডিয়া সেটিংটি অন্তর্ভুক্ত করে "প্রতিক্রিয়াশীল" হোন যাতে ডান কলামটি সরু পর্দার উপর বামদিকে পড়ে falls

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

Comments

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

— জেক

দুর্দান্ত উত্তর! এখানে কোডেপেনের একটি কার্যকারী উদাহরণ রয়েছে: codepen.io/martinkrulltott/pen/yNxezM

— মার্টিন

Answer 4

এটি ব্যবহারের জন্য এখন পর্যন্ত সবচেয়ে সহজ এবং সবচেয়ে নমনীয় সমাধানtable display :

এইচটিএমএল, বাম ডিভ প্রথম আসে, ডান ডিভ দ্বিতীয় আসে ... আমরা বাম থেকে ডানে পড়ি এবং লিখি, সুতরাং এটি ডিভগুলি ডান থেকে বামে রাখার কোনও মানে রাখে না

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

সিএসএস:

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

মামলার উদাহরণ:

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

Comments

খুব ভাল, ধন্যবাদ ধন্যবাদ। কখনও কখনও টেবিলগুলির জন্য একটি সময় এবং স্থান থাকে যখন ফ্লেক্সবক্স একটি কার্যকর বিকল্প নয়। ডিওমে যা সঠিকভাবে স্ট্যাক হয় না তার আগে সঠিক কন্টেন্ট স্থাপনের চেয়ে ..

— ডমিনিক

আমি পছন্দ করি যে এটি একটি 'পরিষ্কার' সমাধান। তবে আপনার ডিভগুলি টেবিল-সেল মোডে রাখার একমাত্র সমস্যা হ'ল আপনি টেবিল ও টিডিএসও ব্যবহার করতে পারেন। এবং আপনি ওভারফ্লো স্ক্রোলিং ইত্যাদির মতো বৈশিষ্ট্যগুলি

— হারাবেন

এটি অন্যায়, কারণ এই সমাধানটি কমপক্ষে শব্দার্থগতভাবে সঠিক এবং কেবলমাত্র আরডাব্লুডি কৌশলগুলির প্রতি বন্ধুত্বপূর্ণ, যদিও এর tableসাথে একটি ব্যবহার করা tdঅবশ্যই নয়!

— ianp

এই পদ্ধতিটি সহজেই একটি মিডিয়া ক্যোয়ারিকে নিয়মিত ডিভগুলির জন্য টেবিলটি ড্রপ করতে দেয় যদি কলামগুলি সংকীর্ণ হয়। সুন্দর এবং পরিষ্কার। আমি পছন্দ করি.

— অ্যান্থনিভিও

Answer 5

আমি একটি অন-নিরশিত সমাধানের পরামর্শ দিতে চাই: সিএসএস 3 এর calc()মিশ্রণ %এবং pxইউনিটগুলি ব্যবহার করুন। calc()হয়েছে চমৎকার সমর্থনআজকাল এবং এটি বেশ জটিল লেআউটগুলির দ্রুত নির্মাণের অনুমতি দেয়।

নীচের কোডটির জন্য এখানে একটি জেএসফিডাল লিঙ্ক।

এইচটিএমএল:

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

সিএসএস:

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

এবং এই ধারণাটি আরও জটিল বিন্যাসে প্রয়োগ করা হচ্ছে এমন আরও একটি জেএসফিডাল এখানে । আমি এখানে এসসিএসএস ব্যবহার করেছি যেহেতু এর ভেরিয়েবলগুলি নমনীয় এবং স্ব-বর্ণনামূলক কোডের জন্য মঞ্জুরি দেয়, তবে "হার্ড-কোডড" মানগুলি কোনও সমস্যা না হলে খাঁটি সিএসএসে লেআউটটি সহজেই পুনরায় তৈরি করা যায়।

Answer 6

এটি একটি জেনেরিক, এইচটিএমএল উত্স অর্ডারযুক্ত সমাধান যেখানে:

• উত্স ক্রমের প্রথম কলামটি তরল
• উত্স ক্রমে দ্বিতীয় কলাম স্থির করা হয়েছে
  • এই কলামটি সিএসএস ব্যবহার করে বাম বা ডানদিকে ভাসমান হতে পারে

ডানদিকে স্থির / দ্বিতীয় কলাম

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

বামে স্থির / দ্বিতীয় কলাম

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

বিকল্প সমাধানটি ডিসপ্লে ব্যবহার করা হয়: টেবিল-সেল ; যার সমান উচ্চতা কলামগুলির ফলাফল।

Comments

ডানদিকে দ্বিতীয় কলাম কাজ করবে না। বাম কলামে যদি পাঠ্যে পূর্ণ থাকে তবে আপনার ডান কলামটি একটি নতুন সারি হিসাবে প্রদর্শিত হবে।

— টমসওয়ায়ার

আপনি কি আরও বেশি সামগ্রী এবং আকার পরিবর্তন করার চেষ্টা করেছেন? সবেমাত্র আপনার কোড পরীক্ষা করেছেন এবং কাজ করেন নি।

— টমসওয়ায়ার

আপনি কি কথা বলছেন তা আমি নিশ্চিত নই। এখানে আমি আরও বিষয়বস্তু রাখার চেষ্টা করছি: jsfiddle.net/salman/mva6cnxL এবং jsfiddle.net/salman/mva6cnxL/1 । নির্দোষভাবে কাজ করে।

— সালমান একটি

আমি যা অনুসন্ধান করেছি ঠিক তেমন। ধন্যবাদ

Answer 7

আরে, আপনি যা করতে পারেন তা হ'ল উভয় ধারকগুলিতে একটি নির্দিষ্ট প্রস্থ প্রয়োগ করা এবং তারপরে আরও একটি ডিভি ক্লাস ব্যবহার করুন যেখানে পরিষ্কার: উভয়ই পছন্দ

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

বাম এবং ডান ধারক অধীনে একটি পরিষ্কার ডিভি রাখুন।

Answer 8

আমি এটি সরল করে তুলেছি: আমি জ্যাকজয়ের উত্তর সম্পাদনা করেছি। উচ্চতা অটো ইত্যাদির প্রয়োজন নেই বলে আমি মনে করি।

সিএসএস:

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

এইচটিএমএল:

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

স্নাতকোত্তর প্যাচসমূহ আপনি উপস্থাপন করতে পারেন। ফেসেলাস ভেরিয়াস এলিফেন্ড। স্নাতকোত্তর প্যাকেজ, প্যাকেজ অভিজাতদের জন্য উপযুক্ত it

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>

Comments

মূল প্রশ্নটি স্থির আকারের সাথে একটি ডান কলাম চায় wants

— ডাঃ অ্যারন ডিসনো