সিএসএস উল্লম্ব সারিবদ্ধভাবে ভাসমান কাজ করে না

Question

আমি কিভাবে ব্যবহার করতে পারেন vertical-alignসেইসাথে floatমধ্যে divবৈশিষ্ট্য? vertical-alignযদি আমি ব্যবহার করি না কাজ করে জরিমানা float। তবে আমি যদি ভাসাটি ব্যবহার করি তবে এটি কার্যকর হয় না। float:rightসর্বশেষ ডিভের জন্য এটি ব্যবহার করা আমার পক্ষে গুরুত্বপূর্ণ ।

আমি অনুসরণ করার চেষ্টা করছি, আপনি যদি সমস্ত ডিভের থেকে ভাসাটি সরিয়ে ফেলেন তবে তা ঠিক কাজ করবে:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

সিএসএস:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

জেএসফিডাল

Answer 1

আপনাকে লাইন-উচ্চতা নির্ধারণ করতে হবে।

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

Comments

আপনি যদি line-heightসমস্ত উপাদানগুলির জন্য একই মান নির্ধারণ করেন তবে vertical-alignএটি অকেজো। ( jsfiddle.net/VBR5J/448 )

— অ্যাডারসন টি। জ্লাচটা

<button>উপাদানগুলির জন্য কাজ করে না । পরিবর্তে <span>একটি হয় <button>।

— সবুজ

এই উত্তরটি ভুল। উল্লম্ব-সারিবদ্ধকরণ divপৃথক উপাদান নয় কন্টেইনার (এর ) এর সাথে সম্পর্কিত। সঠিক সমাধান - উল্লম্ব সমতলতা করতে সক্ষম উপাদান বাড়ালো - উভয় করা হয় vertical-alignএবং line-heightআধারের ওপর: <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">। vertical-align:middle; line-height: 38px;স্প্যান শৈলীগুলি থেকে সরান ।

— টুলমেকারস্টেভ

সবেমাত্র আবিষ্কার করেছি যে আমি প্রস্তাবিত যা উত্তরের ফ্রিডে ভাসমান স্প্যানগুলির জন্য কাজ করে তবে কিছু উপাদানগুলির জন্য নয় (ভাসমান রেডিও ইনপুটটির জন্য ব্যর্থ হয়েছিল)।

— টুলমেকারস্টেভ

@ টুলমেকারস্টেভ ভুল, এবং এই উত্তরটি ভুল। উল্লম্ব-সারিবদ্ধকরণ কেবল ইনলাইন উপাদান, ইনলাইন ব্লক বা টেবিল কোষগুলিতে প্রযোজ্য (পরে কেবল অদ্ভুত)। একটি 'ফ্লোট' যুক্ত করা উপাদানকে একটি ব্লক উপাদান তৈরি করে। তবুও, লাইন-উচ্চতা (এবং উল্লম্ব-প্রান্তকে উপেক্ষা করে) ব্যবহার করা সমাধান হতে পারে।

— কমনপাইক

Answer 2

সম্পাদিত:

উল্লম্ব প্রান্তিককরণ সিএসএস সম্পত্তি একটি ইনলাইন, ইনলাইন-ব্লক বা টেবিল-সেল উপাদান উল্লম্ব প্রান্তিককরণ নির্দিষ্ট করে।

উল্লম্ব-সারিবদ্ধ বোঝার জন্য এই নিবন্ধটি পড়ুন

Comments

এটি inline-blockউপাদানগুলিতেও প্রযোজ্য ।

— রল্ফ

আপডেট হয়েছে। আমি এটা মিস করেছি উল্লেখ করার জন্য ধন্যবাদ।

— আহসান খুরশিদ

এটি কোনও উত্তর নয়

— সার্জান আখমেটোভ

যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে। - পর্যালোচনা থেকে

— উত্সব প্যাটেল

Answer 3

উল্লম্ব সারিবদ্ধতা আসলে ভাসমান উপাদানগুলির সাথে কাজ করে না। এর কারণ ভাসাটি নথির স্বাভাবিক প্রবাহ থেকে উপাদানটিকে উত্তোলন করে। রূপান্তর, প্রদর্শন: টেবিল, পরম অবস্থান, লাইন-উচ্চতা, জেএস (সম্ভবত শেষ অবলম্বন) বা এমনকি প্লেইন পুরাতন এইচটিএমএল টেবিল (সম্ভবত প্রথম পছন্দ যদি সামগ্রীটি হয় তবে আপনি অন্যান্য উল্লম্ব সারিবদ্ধ কৌশলগুলি ব্যবহার করতে পারেন) আসলে সারণী)। আপনি দেখতে পাবেন যে এই সমস্যা নিয়ে তীব্র বিতর্ক রয়েছে।

যাইহোক, আপনি এভাবে নিজের 3 ডিভটি উল্লম্বভাবে সারিবদ্ধ করতে পারেন:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

আপনার স্থির প্রস্থ, প্রদর্শন উভয় কেন প্রয়োজন তা নিশ্চিত নন: ইনলাইন-ব্লক এবং ভাসমান।

Comments

কীভাবে সমাধানটি অর্জন করবেন তা দেখানোর জন্য আপনি কি আপনার উত্তরে কিছু কোড যুক্ত করতে পারেন?

— অ্যাবারিসোন

এছাড়াও, "সঠিক উত্তর" ভাঙা এত সহজ ... এটি আমার অবাক করে তোলে যে পৃথিবীতে কীভাবে 19 জন লোক এটির ভোট দিয়েছে।

— গ্যাব্রিয়েল

প্রশ্নটি বলেছিল "তাকে ভাসা লাগবে: শেষ উপাদানটির ডানদিকে", সুতরাং ধারকটির ডান পাশে থাকতে শেষ উপাদানটির প্রয়োজন হতে পারে তার। আপনার উত্তরে কীভাবে এই লক্ষ্য অর্জন করবেন?

— fly.x

ভাল উত্তর, এবং পাশাপাশি পরিষ্কার! এটি কেবল ফ্লেক্সবক্স বিকল্পটি হারিয়েছে।

— লুইলিফ