কীভাবে একটি ডিআইভি মোড়ানো না হয়?

Question

আমার একটি ধারক ডিআইভি শৈলী তৈরি করতে হবে যাতে একাধিক অন্যান্য ডিআইভি রয়েছে। জিজ্ঞাসা করা হয় যে ব্রাউজার উইন্ডোটি সংকীর্ণ করার জন্য এই ডিআইভিগুলি মোড়ানো হবে না।

আমি এটিকে নীচের মত কাজ করার চেষ্টা করেছি।

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

এটি বেশিরভাগ ক্ষেত্রেই কাজ করে। তবে কিছু বিশেষ ক্ষেত্রে, রেন্ডারিংটি ভুল। আমি আই 7 এর আরটিএলে 3000px প্রস্থে ধারক ডিআইভির পরিবর্তনটি পেয়েছি; এবং এটি অগোছালো হয়ে যায়।

কোনও পাত্রে ডিআইভি গুটিয়ে না রাখার অন্য কোনও উপায় আছে কি?

Comments

আমি এই ট্যাগটি যুক্ত করেছি: সাদা স্থান: এখনই; এবং এই ট্যাগ: পাঠ্য-ওভারফ্লো: উপবৃত্ত; আমার কোডে

— সাবের তাবতাবই ইয়াজদী

Answer 1

white-space: nowrap;ধারক শৈলীতে ব্যবহার করার চেষ্টা করুন (পরিবর্তে overflow: hidden;)

Answer 2

আমি যদি ন্যূনতম প্রস্থটি সংজ্ঞায়িত করতে না চাই তবে কারণ যে পরিমাণ উপাদানগুলি আমার পক্ষে কাজ করেছে আমি তা জানি না:

display: inline-block;
white-space: nowrap;

তবে কেবল ক্রোম এবং সাফারিতে: /

Answer 3

নিম্নলিখিতগুলি আমার জন্য ভাসমান ছাড়াই কাজ করেছে (আমি আপনার উদাহরণটি ভিজ্যুয়াল এফেক্টের জন্য কিছুটা পরিবর্তন করেছি):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

ডিভগুলি ফাঁক দিয়ে আলাদা করা যেতে পারে। যদি আপনি এটি না চান তবে এর margin-right: -4px;পরিবর্তে margin: 5px;ব্যবহার করুন .slide(এটি কুৎসিত তবে এটি মোকাবেলা করার জন্য এটি একটি জটিল সমস্যা )।

Comments

দুর্দান্ত উত্তর। আমি নীচে অনুরূপ উদাহরণ যুক্ত করেছি তবে আমি আপনারটি দেখার পরে এটি মুছে ফেলেছি। আপনার যদি আইই 9 সমর্থন না করতে হয় তবে আপনি ফ্লেক্সবক্সও ব্যবহার করতে পারেন: jsfiddle.net/7gsrb38L/1

— ValentinVoilean

আপনি </div><!-- --><div class="slide">যদি তাদের মধ্যে অতিরিক্ত স্থান সরাতে চান তবে ডিভিএসের মধ্যে এইচটিএমএল মন্তব্য ব্যবহার করতে পারেন । ইনলাইন-ব্লক শৈলীর কারণে আপনার কোডের শ্বেত স্থানটি এইচটিএমএল ডকুমেন্টে স্থান হিসাবে বাছাই করতে পারে।

— জো।

@Jo। পৃষ্ঠার আকার হ্রাস করতে আপনি বরং রেন্ডার নয় এমন কিছু ব্যবহার করতে পারেন যেমন পিএইচপি ব্যবহার করার সময়: উত্স কোড </div><?php ?><div class="slide">হিসাবে রেন্ডার করে </div><div class="slide">।

— ফ্লুভ

এছাড়াও, আপনি যদি জাভাস্ক্রিপ্টের সাহায্যে এইচটিএমএল তৈরি করেন তবে ফাঁকা স্থানগুলি এড়াতে পারবেন। আমি DOThtml ব্যবহার করি । উপরের এইচটিএমএল এটি দিয়ে প্রতিস্থাপন করা যেতে পারে:dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")

— JSideris

Answer 4

আপনার প্রয়োজন কম্বোটি

white-space: nowrap

পিতামাতার উপর এবং

display: inline-block; // or inline

বাচ্চাদের উপর

Answer 5

এটি আমার পক্ষে কাজ করেছে:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

এটি ওভারফ্লো সহ: লুকানো আমার জন্য ট্রিট করে। ধন্যবাদ।

— অ্যালফি

Answer 6

overflow: hiddenআপনাকে সঠিক আচরণ দেওয়া উচিত। আমার অনুমানটি RTLএলোমেলো হয়ে গেছে কারণ আপনার float: leftএনক্যাপসুলেটেড divগুলি রয়েছে।

এই বাগের পাশেই আপনি সঠিক আচরণ পেয়েছেন।

Comments

এটি এনক্যাপসুলেটেড ডিভিজে "ফ্লোট: বাম" কারণে রয়েছে কিনা তা আমি পরীক্ষা করব। তবে, একই কোড ফায়ারফক্স এবং সাফারিগুলিতে সূক্ষ্মভাবে কাজ করে, কেবলমাত্র আইই-তে নয়। সুতরাং, আমি সত্যিই সন্দেহ এই ক্ষেত্রে।

— মরগান চেং

Answer 7

width: 3000px;আইই এর ক্ষেত্রে ব্যবহার করার চেষ্টা করুন ।

Answer 8

উপরের কেউই আমার পক্ষে কাজ করেনি।

আমার ক্ষেত্রে, আমার তৈরি করা ব্যবহারকারী নিয়ন্ত্রণে আমাকে নিম্নলিখিতগুলি যুক্ত করা দরকার:

display:inline-block;

Answer 9

min-widthসম্পত্তি সঠিকভাবে ইন্টারনেট এক্সপ্লোরার, যা সর্বাধিক সম্ভবত আপনার সমস্যার কারণ হয় কাজ করছে না।

তথ্য এবং একটি উজ্জ্বল স্ক্রিপ্ট পড়ুন যা অনেকগুলি আইএস সিএসএস সমস্যা সমাধান করে ।

Answer 10

তুমি ব্যবহার করতে পার

display: table;

আপনার ধারক এবং এর জন্য এড়ানো overflow: hidden;। আপনি যদি এটি কেবল যুদ্ধের উদ্দেশ্যে ব্যবহার করেন তবে কাজটি করা উচিত।

Answer 11

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Answer 12

ব্যবহার করুন display:flexএবংwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

Answer 13

<span>ট্যাগ একটি নথি গোষ্ঠীবদ্ধ ইনলাইন-উপাদান ব্যবহার করা হয়।
(উৎস)

Comments

যদিও এটি সত্য, এটি মোটেই প্রশ্নটির দিকে নজর দেয় না।

— কোয়ান্টিন

এটি পুরোপুরি প্রশ্নটিকে সম্বোধন করে কারণ বিভাজক এবং স্প্যানটি বাদ দিলেও স্প্যান এবং ডিভ অনাথনে অভিন্ন। এবং আপনি যে কাজটি চান তা প্রয়োগ করতে পারেন।

— মাইক 15

এর অর্থ কি এই যে আপনার পরামর্শটি "ডিভের পরিবর্তে স্প্যান ব্যবহার করুন"? কারণ আপনি যা বলেছিলেন তা নয়।

— কোয়ান্টিন