আমি কীভাবে এক লাইনে সিএসএস ভাসিয়ে রাখতে পারি?

Question

আমি float: leftবামদিকে আইটেমটি ব্যবহার করে একই লাইনে দুটি আইটেম রাখতে চাই ।

এটি একা অর্জন করতে আমার কোনও সমস্যা নেই। সমস্যাটি হ'ল, আমি চাই যে আপনি ব্রাউজারটি খুব ছোট আকারে আকার দেওয়ার পরেও দুটি আইটেম একই লাইনে থাকুক । আপনি জানেন ... টেবিলগুলির সাথে এটি কেমন ছিল।

লক্ষ্য মোড়কে থেকে ডান দিকে আইটেমটি রাখা কোন ব্যাপার কি ।

সিএসএস ব্যবহার করে আমি ব্রাউজারকে কীভাবে বলব যে ডিভটি নীচে থাকে তার চেয়ে আমি মোড়ানোের চেয়ে প্রসারিতটি প্রসারিত করবdiv ?float: right;float: left; div

আমি যা চাই:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Comments

স্ট্যাক ওভার্লো যদি একটি সামান্য অঙ্কন উইজেট যুক্ত করে থাকে তবে আমরা মাউসের সাহায্যে এই চিত্রগুলি তৈরি করতে পারি তা কত শীতল হবে? ডিজাইন-ভিত্তিক এসই সাইটগুলির জন্য আরও উপযুক্ত হতে পারে ... তবে তা সত্ত্বেও দুর্দান্ত হবে।

— জোকুল

@ জোকুল ইউএক্স এসই সাইটে ইতিমধ্যে ইতিমধ্যে মকআপগুলি তৈরি করার একটি সরঞ্জাম রয়েছে। meta.ux.stackexchange.com/questions/1291/…

— ফ্র্যাঙ্ক হ্যাডার

Answer 1

আপনার ক্রম ব্রাউজারটি ন্যূনতম প্রস্থের হ্যাক ব্যবহার করে এমন <div>একটি পাত্রে আপনার ভাসমান টি <div>মুড়ে দিন:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

আপনার "ওভারফ্লো" সেট করতেও হতে পারে তবে সম্ভবত তা নয়।

এটি কাজ করে কারণ:

• !importantঘোষণা, সঙ্গে মিলিত min-widthকারণ সবকিছু IE7 + এ একই লাইনে থাকার
• আই 6 টি বাস্তবায়ন করে না min-width, তবে এতে একটি বাগ রয়েছে যা ঘোষণাকে width: 100pxওভাররাইড করে !important, যার ফলে ধারকটির প্রস্থ 100px হতে পারে।

Comments

এটি দুটি ফ্লোটের জন্য দুর্দান্ত কাজ করে তবে তিনটি নয়। এটা কি তিনজনের জন্য কাজ করতে পারে ??

— টাইলারথেমিলার

একমাত্র সমস্যা হ'ল এটি একটি নির্দিষ্ট ন্যূনতম প্রস্থকে বাধ্য করে।

— ম্যাট মন্টাগ

এটি কোনও সমাধান নয়, এটি কেবলমাত্র এক মিনিটের প্রস্থ, যখন আপনার বিষয়বস্তু সত্যিই ছোট হয়ে যায় (প্রশ্ন দেখুন) আপনার একই সমস্যাটি 100px এর নীচে। বিশেষত টেবিল কোষগুলির সাথে, এটি একটি সমস্যা থেকে যায়।

— সান

একেবারে শকিং - তাত্ক্ষণিকভাবে আমার সমস্যা সমাধান করুন। আমি নাম বলতে পারি না তার চেয়ে বেশি বাক্সের হ্যাক সহ একটি সাধারণ দুটি কলাম বুটস্ট্র্যাপ বিন্যাসে এই সমস্যাটির সাথে ঘুরছি but তবে এটি পুরোপুরি কার্যকর হয়েছিল। কেন এই কাজ - আকর্ষণীয় স্টাফ, ডোম হয় তা ব্যাখ্যা করার জন্য আপনাকে ধন্যবাদ।

— নিখরচায়

এটি

— ডিভগুলি

Answer 2

আরেকটি বিকল্প হ'ল ভাসমানের পরিবর্তে, সাদা-স্পেস সম্পত্তিটিকে এখন পিতামাতার দ্বীপে সেট করুন:

.parent {
     white-space: nowrap;
}

এবং সাদা স্থানটি পুনরায় সেট করুন এবং একটি ইনলাইন-ব্লক প্রদর্শন ব্যবহার করুন যাতে ডিভগুলি একই লাইনে থাকে তবে আপনি এখনও এটিকে প্রস্থ দিতে পারেন।

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

এখানে একটি জেএসফিডাল: https://jsfiddle.net/9g8ud31o/

Comments

অবশ্যই আমি দেখেছি সেরা সমাধান। এটি আমার ব্যবহারের ক্ষেত্রে কাজ করে তবে আমি ভাবছি যে এটি কতটা সমর্থিত supported ভাগ্যক্রমে প্রত্যেকের জন্য ফ্লোট ব্যবহার করা ধীরে ধীরে অতীতের একটি বিষয় হয়ে উঠছে।

— রায়ান অরে

এটি কীভাবে কাজ করে তা ব্যাখ্যা করতে পারেন? বা কমপক্ষে কোন লিঙ্ক?

— অনিরুধন জে

@ আনিরুধনজে এটি খুব কঠিন কিছু নয়। ইনলাইন-ব্লক উপাদানগুলিকে ইনলাইন পাঠ্যের সাথে স্বাভাবিকভাবে প্রবাহিত করে তোলে (তবে ব্লকের কিছু প্যাডিং / মার্জিন ক্ষমতা ধরে রাখে) এবং আপনি আক্ষরিক অর্থে সিএসএসকে সাদা-স্পেসের সাহায্যে মোড়ক না দেওয়ার জন্য বলছেন: নরপ বিকল্প (সাধারণ প্রয়োগ করে "প্রয়োগ করুন" "আবার সন্তানের কাছে, এটিকে সব কিছুতে ছড়িয়ে দেওয়া এড়াতে)

— ব্রায়ান

আপনি কীভাবে পর্দার ডানদিকে ভাসতে ডানদিকে ডিভ পাবেন? এটি কেবল একে অপরের পাশে দুটি ইনলাইন-ব্লক রাখে যা লাইন ভাঙবে না।

— এডমিট

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

— ক্লাদিউ

Answer 3

আপনার ফ্লোটারগুলি ফ্লাটারের সম্মিলিত প্রস্থ + মার্জিনের চেয়ে ন্যূনতম প্রস্থের সাথে একটি ডিভের মধ্যে আবদ্ধ করুন।

কোনও হ্যাক বা এইচটিএমএল টেবিলের প্রয়োজন নেই।

Answer 4

সমাধান 1:

প্রদর্শন: টেবিল-ঘর (ব্যাপকভাবে সমর্থিত নয়)

সমাধান 2:

টেবিল

(আমি হ্যাক্স ঘৃণা করি।)

Answer 5

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

Answer 6

আপনি কি নিশ্চিত যে ভাসমান ব্লক-স্তরের উপাদানগুলি এই সমস্যার সর্বোত্তম সমাধান?

প্রায়শই আমার অভিজ্ঞতায় সিএসএসের অসুবিধাগুলি দেখা যায় যে আমি যে জিনিসটি চাই তার কাজ করার উপায়টি দেখতে পাচ্ছি না তার কারণটি হ'ল আমি আমার মার্কআপ সম্পর্কে সুরক্ষা দর্শন পেয়েছি (এই "কীভাবে আমি এইগুলি তৈরি করতে পারি" উপাদানগুলি এটি করে ? ") বরং ফিরে যাবার এবং ঠিক কী অর্জন করা দরকার তা দেখার চেয়ে এবং সম্ভবত এটির সুবিধার্থে আমার এইচটিএমএলকে সামান্য কাজ করা দরকার।

Comments

ভাল এটি প্রায় সমস্ত কিছুর জন্য কাজ করে এবং বিদ্যমান লেআউটটি এর উপর ভিত্তি করে তৈরি হয়, যখন আপনি পাঠ্যের আকারটি খুব বেশি বাড়ান বা ব্রাউজার উইন্ডোটি 700px প্রশস্ত আকারে ছোট করে আকার পরিবর্তন করতে চাই

— জিয়ারো

Answer 7

আমি এই সমস্যার জন্য সারণী ব্যবহার করার পরামর্শ দেব। আমার অনুরূপ সমস্যা হচ্ছে এবং যতক্ষণ না টেবিলটি কেবলমাত্র কিছু ডেটা প্রদর্শন করতে ব্যবহৃত হয় এবং মূল পৃষ্ঠার বিন্যাসের জন্য এটি ঠিক না।

Answer 8

আপনার ভাসমান উপাদান নির্বাচকের সাথে এই লাইনটি যুক্ত করুন

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

এটি প্যাডিং এবং সীমানাগুলি প্রস্থে যুক্ত হতে বাধা দেবে, সুতরাং উপাদানগুলি সর্বদা সারিতে থাকবে, এমনকি আপনার উদাহরণ থাকলেও। 33.33333% প্রস্থ সহ তিনটি উপাদান

Answer 9

যখন ব্যবহারকারী উইন্ডোর আকারটি অনুভূমিকভাবে হ্রাস করে এবং এর ফলে ভাসমানগুলি উল্লম্বভাবে স্ট্যাক হয়ে যায়, তখন ফ্লোটগুলি সরিয়ে ফেলুন এবং দ্বিতীয় ডিভিতে (এটি একটি ফ্লোট ছিল) মার্জিন-শীর্ষ ব্যবহার করুন: -123px (আপনার মান) এবং মার্জিন-বাম: 444px (আপনার মান) থেকে ভাসমানগুলির সাথে উপস্থিত হওয়ার সাথে সাথে ডিভগুলি অবস্থান করুন। এইভাবে করা হয়ে গেলে, উইন্ডোটি সঙ্কুচিত হলে ডান দিকের ডিভটি জায়গায় থাকে এবং পৃষ্ঠাটি অন্তর্ভুক্ত করার জন্য খুব সংকীর্ণ হয়ে গেলে অদৃশ্য হয়ে যায়। ... যা (আমার কাছে) ব্রাউজার উইন্ডোটি যখন ব্যবহারকারী দ্বারা সংকীর্ণ হয় তখন ডান দিকের ডিভ "জাম্প" বাম পাশের ডিভের নিচে রাখার চেয়ে ভাল।

Answer 10

আমি এর আশেপাশে যেভাবে এসেছি তা হল কিছু jQuery ব্যবহার করা। আমি এইভাবে এটি করার কারণটি ছিল কারণ A এবং B শতাংশ প্রস্থ ছিল।

এইচটিএমএল:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

সিএসএস:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

JQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});

Comments

সিএসএসের জন্য একটি কাঠামো? আমাকে সমস্ত জাভাস্ক্রিপ্ট অনুসন্ধানের জন্য অনুসন্ধান করতে হবে এবং মানের জন্য একটি সম্পূর্ণ এবং সম্পূর্ণ অবজ্ঞার কারণে আমাদেরও খুব স্পষ্টভাবে -jquery দিয়ে সিএসএস অনুসন্ধান শুরু করতে হবে? এটি সঠিকভাবে করুন বা একেবারেই করবেন না।

— জন