স্প্যান বা ডিভিড মোড়ানো রোধ করুন

Question

আমি divএকটি ধারক স্থির প্রস্থের উপাদানগুলির একটি গোষ্ঠী রাখতে এবং অনুভূমিক স্ক্রোল বারটি উপস্থিত হতে চাই। div/ spanউপাদান, একটি লাইন প্রদর্শিত হওয়া উচিত যাতে তারা এইচটিএমএল (মূলত মোড়ানো) প্রদর্শিত ডানে বামে।

এইভাবে অনুভূমিক স্ক্রোল বারটি উপস্থিত হবে এবং সামগ্রীটি (বাম থেকে ডানে) পড়ার জন্য উল্লম্ব স্ক্রোল বারের পরিবর্তে ব্যবহার করা যেতে পারে।

আমি সেগুলি একটি পাত্রে ভাসানোর চেষ্টা করেছি এবং তারপরে ধারকটিতে একটি white-space: nowrapস্টাইল লাগিয়েছি, তবে হায়, এটি এখনও জড়িয়ে আছে বলে মনে হচ্ছে।

ধারনা?

দেখে মনে হচ্ছে:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

আপডেট: উদাহরণের জন্য সাইট
দেখুন , তবে অন্য উপায় না হওয়ার বিষয়ে তারা ভুল ছিল - আমি নিশ্চিত নিবন্ধটি যদিও পুরানো।

Answer 1

এটা চেষ্টা কর:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

নোট করুন যে আপনি বাদ দিতে পারেন .slideContainer { overflow-x: scroll; }(কোন ব্রাউজারগুলি আপনাকে এটি পড়তে পারে এবং সমর্থন করতে পারে না ) এবং আপনি এই ধারকটির পরিবর্তে উইন্ডোতে একটি স্ক্রোলবার পাবেন।

এখানে চাবি display: inline-block। এই আছে শালীন ক্রস ব্রাউজার সমর্থনের আজকাল কিন্তু স্বাভাবিক হিসাবে, এটা সব লক্ষ্য ব্রাউজারে মূল্য পরীক্ষামূলক নিশ্চিত হতে।

Comments

আসলে, আমি আমার সম্পূর্ণ উপস্থাপনা থেকে এই পৃথকটি চেষ্টা করেছি এবং এটি তুলনামূলকভাবে ভাল কাজ করেছে বলে মনে হয়েছে (কমপক্ষে ফায়ারফক্স 3, আই 7, ক্রোম এবং অপেরাতে, যা আমি প্রায় যত্নশীল)

— সিজিপি

কেবল white-space:normalথাকা উপাদানগুলিতে এবং white-space:nowrapপিতামাতার উপর কেবল সেট করা আমার জন্য কৌশলটি করেছিল। অনেক ধন্যবাদ!

— নোটিডার্ট

হোয়াইট-স্পেস: সাধারণ হ'ল ডিফল্ট মান তাই আপনি এটি সেট না করেও, ঠিক আছে।

— পার্থ

@ পার্থকে white-space: normalএই ক্ষেত্রে বাচ্চাদের উপর সেট করা আবশ্যক, যেহেতু তাদের ডিফল্ট white-spaceইতিমধ্যে পিতামাতাদের দ্বারা ওভাররাইড হয়ে গেছে nowrap।

— গুলারওয়াই

Answer 2

এটি ঠিক এটি দিয়ে কাজ করে:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

আমার কাছে প্রাথমিকভাবে ছিল float : left;এবং এটি এটি সঠিকভাবে কাজ করতে বাধা দিয়েছে।

এই সমাধান পোস্ট করার জন্য ধন্যবাদ।

Answer 3

বিশেষ করে যখন টুইটারের ভালো কিছু ব্যবহার বুটস্ট্র্যাপ , white-space: nowrap;সবসময় সিএসএস কাজ করে না যখন একজন শিশু প্যাডিং বা মার্জিন আবেদন div। পরিবর্তে, border: 20px solid transparent;প্যাডিং / মার্জিনের জায়গায় একটি সমতুল্য শৈলী যুক্ত করা আরও ধারাবাহিকভাবে কাজ করে।

Answer 4

উল্লিখিত হিসাবে আপনি ব্যবহার করতে পারেন:

overflow: scroll;

যদি আপনি কেবল যখন প্রয়োজন হয় তখন স্ক্রোল বারটি উপস্থিত হয়, আপনি "অটো" বিকল্পটি ব্যবহার করতে পারেন:

overflow: auto;

আমার মনে হয় না যে আপনার "ওভারফ্লো" দিয়ে "ভাসমান" সম্পত্তিটি ব্যবহার করা উচিত, তবে আপনাকে প্রথমে আপনার উদাহরণটি চেষ্টা করে দেখতে হবে।

Answer 5

দেখে মনে হচ্ছে ডিভগুলি তাদের দেহের প্রস্থের বাইরে যাবে না। এমনকি অন্য ডিভের মধ্যেও।

আমি এটি পরীক্ষার জন্য ছুঁড়ে ফেলেছি (যদিও কোনও ডক্টাইপ ছাড়াই) এবং এটি চিন্তার মতো কাজ করে না।

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

আমি যা ভাবছি তা হ'ল অভ্যন্তরীণ ডিভগুলি আইফ্রেমের মাধ্যমে লোড করা যেতে পারে, যেহেতু এটি অন্য পৃষ্ঠা এবং এর সামগ্রীটি খুব প্রশস্ত হতে পারে।

Comments

ওভারফ্লো-এক্স বা স্ক্রোল-এক্স, আমি বুঝতে পারি না এটি কোনটি। আজ অলস।

— কেন্ট ফ্রেড্রিক