ভাসা: বাম সেট করা থাকলে সর্বাধিক প্রস্থে ডিভ প্রসারিত করুন

115

আমার এমন কিছু আছে:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

উভয় ভাসা neccesary হয়। আমি কনটেন্ট ডিভটি পুরো পর্দাটি মাইনুতে মেনুতে 100px বিয়োগ করতে চাই। আমি যদি ফ্লোট ব্যবহার না করি তবে ডিভটি ঠিক যেমনটি প্রসারিত হবে। তবে ভাসা সেট হয়ে গেলে আমি কীভাবে এটি সেট করব? আমি যদি স্টাথ ব্যবহার করি

style=width:100%

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

html  width 
— ফ্লো
সূত্র

উত্তর:

138

আশা করি আমি আপনাকে সঠিকভাবে বুঝতে পেরেছি, এটি একবার দেখুন: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
স্নিপেট প্রসারিত করুন

— merkuro
সূত্র
5
প্রশ্নটিতে বলা হয়েছে "উভয় ফ্লোটই নেকসেসারি"।
— ক্রিসেন্ট ফ্রেশ
8
হ্যাঁ, আপনি ঠিক বলেছেন এবং আমি সম্মত। তবে আমার কাছে মনে হয় ফ্ল্লো কেবল এটিই উল্লেখ করেছে, কারণ তিনি ভাবেন যে তারা উভয়ই! কাঙ্ক্ষিত বিন্যাস এবং তাই আমার বিকল্প সমাধান পেতে প্রয়োজন।
— মার্চুরো
@ মার্কুরো: ভালো কথা। আমি সম্মত হই, কাঙ্ক্ষিত প্রভাব পেতে ".right" এ ভাসমান হওয়া দরকার না। @ ফ্ল্লো: আপনি কি নিশ্চিত করতে পারেন, বিষয়বস্তু ডিভটি ভাসমান হওয়া উচিত? অন্যান্য কারণে পছন্দ?
— ক্রিসেন্ট ফ্রেশ
এটির সাথে আমি কিছুটা চেষ্টা করব বলে আপনি কাজ করতে পারেন, আপনি সেই কারণটি সঠিক পেয়েছেন, এবং ভাসমানটি ভাল, তবে আমি এটি ঠিক কাজ করব না
— ফ্লো
2
আহ আহ এবং আমি আবার কারণটিকে কেন ভাসতে পরিবর্তিত করেছি তা দেখতে পেয়েছি: আইই 7 এবং ফায়ারফক্স সূক্ষ্ম কাজ করে তবে 5.5 এবং অর্থাত 6 বাম ডিভের ডান প্রান্তে মার্জিনটি শুরু করে, সুতরাং এটির একটি 236px (আসল প্রস্থ, 100) রয়েছে একটি উদাহরণ ছিল) উভয় ডিভের মধ্যে ফাঁক
— ফ্লো
100

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

আপনার কোড ব্যবহার করে এটি কীভাবে এটি করা যায় তার একটি উদাহরণ:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

আশা করি এই সমস্যাটি যে কারও পক্ষে কার্যকর, এটি আমি খুঁজে পেয়েছিলাম যে আমি যে সাইটটি তৈরি করছিলাম তার জন্য এটি সবচেয়ে ভাল কাজ করে, এটি অন্যান্য রেজোলিউশনের সাথে সামঞ্জস্য করার চেষ্টা করার পরে। দুর্ভাগ্যক্রমে, আপনি যদি divবিষয়বস্তুর পরেও সঠিকভাবে অন্তর্ভুক্ত করেন তবে এটি কাজ করবে না , যদি কেউ IE এর উপযুক্ততার সাথে এটির কাজ করার ভাল উপায় জানেন তবে আমি এটি শুনে খুব খুশি হব।

নতুন, আরও ভাল বিকল্প ব্যবহার করে display: flex;

এখন যেহেতু ফ্লেক্সবক্স মডেলটি মোটামুটিভাবে ব্যাপকভাবে প্রয়োগ করা হয়েছে, আমি প্রকৃতপক্ষে এটির পরিবর্তে এটি ব্যবহারের পরামর্শ দেব, কারণ এটি flexবিন্যাসের সাথে আরও অনেক বেশি দক্ষতার সুযোগ দেয় । মূলটির মতো এখানে একটি সাধারণ দ্বি-কলাম রয়েছে:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

এবং এখানে একটি নমনীয় প্রস্থ কেন্দ্র কলাম সহ একটি তিন-কলাম!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
— alanaktion
সূত্র
আরও কিছু পরীক্ষার পরে দেখা যাচ্ছে যে আইই 6 তে কাজ করার জন্য আপনাকে "পজিশন: আপেক্ষিক" দিয়ে হ্যাসআউটটি ট্রিগার করতে হবে না, আমি আইআই 5 সম্পর্কে নিশ্চিত নই, তবে সাধারণত এটি কোনওভাবে অন্তর্ভুক্ত করা কোনও সমস্যা নয়, শুধু নিরাপদ থাকতে
— অ্যালাকেশন
1
এই উত্তরগুলি অপ্রত্যাশিত মনে হয় তবে এটি জেনে রাখা ভাল। ডিভের অভ্যন্তরে একটি ভাসমান উপাদান সহ এটি আপনাকে ভাসিয়ে দেয়। আমি গুগল "ব্লক বিন্যাস প্রসঙ্গে।" এখনই
— কার্লোস গিল
সবচেয়ে ভাল উপায় হ'ল সময় নষ্ট করার পরিবর্তে একটি সাধারণ 2 টি কলস টেবিল ব্যবহার করা সিএসএস নন-ক্রস-ব্রাউজার-
— তুলনামূলক
@ মার্কো আমার ডিজাইনটি প্রতিক্রিয়াশীল হওয়ায় এর জন্য আমার সিএসএস ব্যবহার করা দরকার। বিভিন্ন স্ক্রিন আকারের বিভিন্ন বিন্যাস প্রয়োজন, সুতরাং একটি টেবিল কাজ করবে না। এছাড়াও, এই পদ্ধতিটি মূলত যে কোনও ব্রাউজারে এখনও ব্যবহার করে তা কাজ করে বলে মনে হচ্ছে।
— অ্যালাকেশন
1
@ মারকোডেমিও, আমার বক্তব্যটি ছিল একটি স্ক্রিন আকারে যেখানে ছোট ফিক্সড কলামটি মূল কলাম হিসাবে বড় হবে যেমন একটি মোবাইল ডিভাইসে, আমি দুটি কলামটি পূর্ণ-প্রস্থের সারি হয়ে যেতে চেয়েছিলাম, যা করা যায়নি not টেবিলের সাহায্যে আমি জাভাস্ক্রিপ্টের সাহায্যে সামগ্রীটি প্রায় না ঘোরতে চাইতাম।
— অ্যালাকশন
31

আপনার মার্জিনে আকার ঠিক না করে সমাধান olution

.content .right{
    overflow: auto; 
    background-color: red;
}

মেরকুরোর জন্য +1, তবে যদি ভাসমানের আকার পরিবর্তন হয় তবে আপনার স্থির মার্জিন ব্যর্থ হবে। যদি আপনি ডানদিকে সিএসএসের উপরে ব্যবহার করেন তবে divএটি বাম ফ্লোটের আকার পরিবর্তন করে আকার পরিবর্তন করবে। এটি এর মতো কিছুটা নমনীয়। ফিডলটি এখানে দেখুন: http://jsfiddle.net/9ZHBK/144/

— তাজা ভাব হারান
সূত্র
2
@ অ্যালানাকশন আমি অপ্রয়োজনীয় অটো দূরে নিয়ে গেলাম। পার্থক্যটি ওভারফ্লো মানে। দৃশ্যত overflow: hiddenএবং overflow autoএকই আচরণের ফলাফল। আমিও মনে করি লোকেরা ফিডলকে প্রশংসা করে।
— উইল্ট
: যেকেউ কেন এই কাজ জানতে চায়, তাহলে এখানে দেখতে stackoverflow.com/a/1767270/2756409
— TylerH
আমি মনে করি এটি মার্কুরোর সমাধানের চেয়ে ভাল।
— স্কুরাজেড
6

ভাসমান উপাদানগুলি স্বাভাবিক প্রবাহ বিন্যাসের বাইরে নেওয়া হয় এবং ডিআইভির মতো ব্লক উপাদানগুলি তাদের পিতামাতার প্রস্থের আর প্রসারিত করতে পারে না। এই পরিস্থিতিতে নিয়ম পরিবর্তন হয়। চক্রটি পুনরায় উদ্ভাবন করার পরিবর্তে, আপনি যে দুটি কলাম লেআউট পরে রয়েছেন তা তৈরি করার জন্য কয়েকটি সম্ভাব্য সমাধানের জন্য এই সাইটটি দেখুন: http://www.maxdesign.com.au/presentation/page_layouts/

বিশেষত, "তরল দ্বি-কলাম লেআউট"।

চিয়ার্স!

— শান আইটকেন
সূত্র
4

যদি কেউ আগ্রহী হন এবং "ভাসমান" এর প্রতি আগ্রহী না হন তবে এটি এইচটিএমএল 5 এর জন্য একটি আপডেট সমাধান।

সারণি এক্ষেত্রে দুর্দান্ত কাজ করে কারণ আপনি নির্দিষ্ট প্রস্থটি টেবিল এবং সারণি-ঘরে নির্ধারণ করতে পারেন। 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ @ মুরকুরো থেকে আসল উত্স কোড

— Snowie
সূত্র
+1 অবশেষে এমন কিছু যা স্থির প্রস্থের উপাদানটির সাথে ডানদিকে কাজ করে, এমনকি যদি এটি প্রযুক্তিগতভাবে ভাসা ব্যবহার না করে।
— কার্তিক টি
+1 তাই সম্পূর্ণ হ্যাঁ। ভাসমান এবং অবস্থান এবং টেবিলগুলির সাথে লড়াই করার বহু বছর পরে, এটি সঠিক সমাধান। গৃহীত সমাধান অনিরাপদ CSS প্রচার করে।
— horace
4

এই ব্যবহারটি আপনার সমস্যার সমাধান করতে পারে।

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
স্নিপেট প্রসারিত করুন

— suathd
সূত্র
তাই আপনাকে স্বাগতম। এটি কীভাবে কাজ করে সে সম্পর্কে আপনি একটি ব্যাখ্যা যুক্ত করতে পারেন?
— ইয়্যাক
3

এবং merkuroএর সমাধানের উপর ভিত্তি করে , আপনি যদি বাম দিকে সর্বাধিক করতে চান তবে আপনার ব্যবহার করা উচিত:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

আই-তে পরীক্ষা করা হয়নি, সুতরাং এটি আই-তে ভাঙা লাগতে পারে।

— kubilayeksioglu
সূত্র
1

গৃহীত উত্তরটি কার্যকর হতে পারে তবে আমি ওভারল্যাপিং মার্জিনের ধারণা পছন্দ করি না। এইচটিএমএল 5-এ, আপনি এটি সহ করে যাবেন display: flex;। এটি একটি পরিষ্কার সমাধান। কেবলমাত্র একটি উপাদান এবং flex-grow: 1;গতিশীল উপাদান জন্য প্রস্থ সেট করুন । মার্চারোস ফিডলের সম্পাদিত সংস্করণ: https://jsfiddle.net/EAEKc/1499/

— ক্রিস্টোফ বোহলার
সূত্র
0

হাই হ'ল সঠিক উপাদানটিতে ওভারফ্লো লুকানো পদ্ধতি সহ একটি সহজ উপায় রয়েছে।

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
স্নিপেট প্রসারিত করুন

— সানজিব দেবনাথ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.