দুটি ডিভ, একটি নির্দিষ্ট প্রস্থ, অন্যটি, বাকি

Question

আমার কাছে দুটি ডিভ কনটেইনার আছে।

যখন একটির একটি নির্দিষ্ট প্রস্থ হওয়া দরকার, আমার এটি সামঞ্জস্য করা দরকার, যাতে অন্য ডিভটি বাকী স্থান নেয়। আমি কি এটি করার কোন উপায় আছে?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Comments

প্রাচীন ব্রাউজারগুলির জন্য দশক পুরানো হ্যাক ব্যবহার করবেন না। আধুনিক ফ্লেক্সবক্স সমাধানের জন্য নীচে স্ক্রোল করুন।

— ইভজেনি

আপনি এ্যাজজিনির লিঙ্ক অনুসরণ করার আগে আপনার ব্রাউজারগুলি ব্যবহার করার চেয়ে বরং প্রকৃতপক্ষে আপনার ব্যবহারকারীরা যে ব্রাউজারগুলি ব্যবহার করেন সেগুলি বিবেচনা করুন। ফ্লেক্সবক্স আপনার অধ্যাপকের আইই 9 তে খুব ভালভাবে রেন্ডার করতে যাচ্ছে না: caniuse.com/#feat=flexbox

— duhaime

@duhaime IE9 0.13% গ্লোবাল ব্যবহার হয়েছে

— Evgeny

সুতরাং 1000 ব্যবহারকারীর মধ্যে 1 জন ...

— দুহাইম

Answer 1

দেখুন: http://jsfiddle.net/SpSjL/ (ব্রাউজারের প্রস্থ সামঞ্জস্য করুন)

এইচটিএমএল:

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

সিএসএস:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

---

আপনি এটি দিয়ে এটিও করতে পারেন display: tableযা সাধারণত আরও ভাল পদ্ধতির হয়: আমি কীভাবে কোনও ইনপুট উপাদানটিকে তার লেবেলের মতো একই লাইনে রাখতে পারি?

Comments

এটা আমার সাথে কাজ করছে না। বামে চলছে 100% প্রস্থ এবং ডানদিকে 250px। দুটি লাইন :(

— বহন করুন

আপনি divআমার উত্তর এবং আমার ডেমো মত, এর গুলি এর ক্রম পরিবর্তন করতে হবে । rightতারপর left।

— ত্রিশডট

সামগ্রিকভাবে এটি আমার জন্য কাজ করে তবে মাঝে মাঝে যখন আমার পরবর্তী লাইনে মোড়ক না দিয়ে বাম ডিভিতে পাঠ্য থাকে (এবং সেখানে জায়গা থাকে) এটি কেবল ডানদিকে কাটা হয় (যেখানে ডান ডিভি শুরু হয়)। আমি কীভাবে বাম ডিভে পাঠ্য মোড়ানো করতে পারি?

— লোক

ভাসমান ডিআইভি সম্পূর্ণ প্রস্থ পূরণ করে না। ভাসমান ডিআইভি বা টেক্সট খুব দীর্ঘের চেয়ে সামগ্রী বেশি হলে খারাপ ধারণা।

— নেটঅ্যাকশন

Answer 2

এটি 2017 এবং এটি করার সর্বোত্তম উপায় হ'ল আইল 10 + সামঞ্জস্যপূর্ণ ফ্লেক্সবক্স ব্যবহার করে ।

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Comments

প্রশ্নে আপনার মন্তব্য আমাকে আই 6 সমর্থন করার চেষ্টা থেকে বাঁচিয়েছে। ধন্যবাদ!

— মাইক ড্যাভলান্টেস

এটিও বেশ ভাল তবে

— আই

এটি আমার পক্ষে ভাল কাজ করেছে। এমনকি সংজ্ঞায়িত করার জন্য। ডান প্রস্থের প্রয়োজনও পড়েনি।

— রোটেরক্জ

এটি আমাকে মেরে ফেলেছে যে 2017/2018/2019 এ আমরা এখনও BEWARE OF IE 9. এর লাইনে মন্তব্য পেয়েছি

— মাইক দেবেনি

আপনি "ফ্লেক্স: 0 0 অটো;" এর মতো ডান ডিভের প্রস্থও অটোতে সেট করতে পারেন।

— ডিজে

Answer 3

আপনি সিএসএসের ক্যালক () ফাংশন ব্যবহার করতে পারেন।

ডেমো: http://jsfiddle.net/A8zLY/543/

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

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

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

আশা করি এটা তোমাকে সাহায্য করবে!!

Comments

পরামর্শের জন্য ধন্যবাদ. আমি ব্রাউজারগুলির মধ্যে সামঞ্জস্যতা পরীক্ষা করেছি এবং স্থিতিশীল ব্যবহারের জন্য এটি এক ধরণের উচ্চ

— ফার্সাইড

এটি সেরা উত্তর হিসাবে নির্বাচন করা উচিত, কারণ এই উত্তরে ডিআইভি ট্যাগগুলি সেরা উত্তরের মতো বদলে যায় না।

— ডন দিলঙ্গা

Answer 4

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

এইচটিএমএল:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

সিএসএস:

.right {
  width: 250px;
  float: right;
}   

একটি উদাহরণ: http://jsfiddle.net/blineberry/VHcPT/

একটি ধারক যুক্ত করুন এবং আপনি এটি আপনার বর্তমান উত্স কোড অর্ডার এবং পরম অবস্থানের সাথে করতে পারেন:

এইচটিএমএল:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

সিএসএস:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

এখানে, .leftDIV আছে থেকে একটি পরোক্ষভাবে সেট প্রস্থ পায় top, leftএবং rightশৈলী তাতে অবশিষ্ট স্থান প্রয়োগ করতে পারবেন #container।

উদাহরণ: http://jsfiddle.net/blineberry/VHcPT/3/

Comments

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

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

দ্বিতীয় সমাধানটি যদিও আমার জন্য দুর্দান্ত কাজ করেছে। প্রতিভা!

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

Answer 5

আপনি যদি সেগুলি কোনও পাত্রে মুড়িয়ে <div>রাখতে পারেন তবে বামদিকে <div>নোঙ্গর করতে আপনি অবস্থান ব্যবহার করতে পারেন left:0;right:250px, এই ডেমোটি দেখুন । আমি এখনই বলব যে এটি আই 6 তে কাজ করবে না <div>কারণ একটি পৃষ্ঠার এক কোণার পুরোপুরি অবস্থান করা যেতে পারে ( সম্পূর্ণ ব্যাখ্যার জন্য এখানে দেখুন )।

Answer 6

1- একটি মোড়ক ডিভ রাখুন, প্যাডিং এবং মার্জিনটি আপনার পছন্দ মতো সেট
করুন 2- বাম দিকটি আপনার প্রস্থের প্রস্থটি বিভক্ত করুন এবং এটি বাম দিকে ভাসাবেন
3- বাম পাশের প্রস্থের সমান ডান পাশের ডিভ মার্জিনটি সেট করুন

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

আশা করি এটি আপনার পক্ষে কাজ করে!

Answer 7

অর্জনের বেশ কয়েকটি উপায় রয়েছে, নেতিবাচক মার্জিনগুলি আমার পছন্দের একটি:

http://www.alistapart.com/articles/negativemargins/

শুভকামনা!

Answer 8

আপনার ডানটিকে নির্দিষ্ট প্রস্থে সেট করুন এবং এটিকে ভাসাবেন, আপনার বামে প্রান্তিক-ডানদিকে 250px সেট করুন

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

Comments

ডানদিকে প্রদর্শন প্রকারটি মেরে ফেলুন এবং নিশ্চিত করুন যে আপনার কোথাও একটি পরিষ্কার সেটিংস নেই যা বামে প্রভাব ফেলবে

— বামে

আপনার কি কোনও ধরণের রেপার ডিভি আছে? অনলাইনে এমন কিছু আছে যা আমি পরিদর্শন করতে পারি বা এটি সম্পূর্ণ স্থানীয়?

— উল্কাপাতিকারী

এটি সম্পূর্ণরূপে, স্থানীয়, তবে, আমি এটি জেএসফিডেলে রাখার চেষ্টা করি।

— সহ্য করুন

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

— উল্কাপাতিকারী

Answer 9

আপনার যদি ক্রস ব্রাউজার সমাধানের প্রয়োজন হয় তবে আপনি আমার পদ্ধতিকে পরিষ্কার এবং সহজ ব্যবহার করতে পারেন।

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

Answer 10

এটি আপনাকে সাহায্য করতে পারে সহজ ব্যবহার করুন

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>