মোড়ানো থেকে ভাসমান ডিভগুলি বন্ধ করুন


85

আমি ব্রাউজারগুলি ফিট করার জন্য খুব সংকীর্ণ হলে মোড় না দেয় এমন একটি সারি ডিভ (কোষ) রাখতে চাই।

আমি স্ট্যাক অনুসন্ধান করেছি এবং আমার মনে হয় যে একটি সহজ সিএসএস প্রশ্ন হওয়া উচিত তার একটি কার্যকরী উত্তর খুঁজে পেলাম না।

কক্ষগুলির প্রস্থ নির্দিষ্ট করা আছে। তবে আমি সারিটির প্রস্থ নির্দিষ্ট করতে চাই না, প্রস্থটি স্বয়ংক্রিয়ভাবে তার শিশু কোষের প্রস্থ হওয়া উচিত।

যদি ভিউপোর্টটি সারিগুলি সংযুক্ত করতে খুব সংকীর্ণ হয়, তবে ডিভটি স্ক্রোলবারগুলির সাথে উপচে পড়তে হবে।

দয়া করে আপনার উত্তরটি ওয়ার্কিং কোড স্নিপেট হিসাবে সরবরাহ করুন, যেহেতু আমি অন্য কোথাও দেখেছি এমন সমাধানের অনেক চেষ্টা করেছি (যেমন প্রস্থ নির্দিষ্ট করুন: 100% এবং সেগুলি কাজ করে বলে মনে হয় না)।

আমি কেবল এইচটিএমএল / সিএসএস সমাধান সন্ধান করছি, জাভাস্ক্রিপ্ট নেই।

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

এই মুহুর্তে আমি সারিটির প্রস্থকে সত্যিই বড় সংখ্যায় কোডিং করছি।


4
নীচের উত্তরগুলির মধ্যে একটি আপনার পক্ষে কাজ করেছে? আমি তাদের কারও সাথে কোনও সাফল্য পাচ্ছি না।
জন ফিৎসপ্যাট্রিক

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

@ নিকোলাস আমি মনে করি আমার উদাহরণটি ঠিক আপনি যা খুঁজছেন তা হ'ল , আমি আজ এই একই সমস্যাটি পেলাম। ড্রপ-ডাউন মেনুগুলি ওভারফ্লো হয়েছে তবে প্রথম স্তরটি মোড়বে না।
জন

উত্তর:


109

সিএসএস সম্পত্তিটি display: inline-blockএই প্রয়োজনটিকে মোকাবেলার জন্য ডিজাইন করা হয়েছিল। আপনি এটি সম্পর্কে এখানে কিছুটা পড়তে পারেন: http://robertnyman.com/2010/02/24/css-display-inline- block-why- it- rocks-and-why- it- sks/

নীচে এর ব্যবহারের একটি উদাহরণ দেওয়া আছে। মূল উপাদানগুলি rowহ'ল উপাদানটি থাকে white-space: nowrapএবং cellউপাদান থাকে display: inline-block। এই উদাহরণটি বেশিরভাগ প্রধান ব্রাউজারগুলিতে কাজ করা উচিত; একটি সামঞ্জস্যের টেবিলটি এখানে উপলব্ধ: http://caniuse.com/#feat=inline- block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>

4
আইআইএলকে কুইর্কস মোডে ডিফল্ট না রাখার জন্য এইচটিএমএলের শীর্ষে যোগ করুন <!DOCTYPE html>বা <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">উপরে।
সিস টিমারম্যান

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

এটি সর্বশেষ কোষটির সাথে কাজ করে না float: right, তাই না?
অ্যান্ডি

4
এই সত্যিই কিভাবে রাখার একটি উদাহরণ নয় বাড়ালো মোড়ানো থেকে আছে divs - আপনি অবশ্য কোষ unfloated। আমার কিছু বাম এবং ডান ফ্লোটের সাথে একটি বিন্যাস রয়েছে, তাই মোড়কের সমস্যাটি সমাধান করার জন্য আমি ফ্লোটগুলি শেষ করতে পারি না।
অ্যান্ডি

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

32

আপনি min-widthসারিটিতে সংজ্ঞায়িত করতে চান তাই যখন এটি ব্রাউজারটি পুনরায় আকারের হয় তখন এটি তার নীচে যায় না এবং মোড়ানো হয়।


4
এটি এমনকি ভাসমান নিয়ে কাজ করবে। আমি মনে করি এটিই আসল উত্তর।
ড্যানন

4
@ ড্যাননের সাথে সম্মত হন - এটি কাজ করে যেখানে ইনলাইন-ব্লক উল্লম্ব প্রান্তিককরণের সমস্যাগুলি প্রবর্তন করে।
ডিএলচ্যাম্বার্স 21

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

4
-1; এটি তার প্রশ্নে ওপি বিশেষত যা বলেছিল তার বিপরীতে চলেছে, যথা প্রশস্ততা নির্দিষ্ট করতে হবে না। উপরের ক্যালভিনের মন্তব্যে +1
তেওডোর সান্দু

5

জন এর উত্তর পড়ার পরে, আমি আবিষ্কার করেছি যে নিম্নলিখিতটি আমাদের জন্য কাজ করছে (নির্দিষ্ট প্রস্থের প্রয়োজন নেই):

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>

আইফোনটিতে ড্রাগ্যাগযোগ্য ডিভগুলি নিয়ে আমার যে সমস্যা হয়েছে তা এটি সমাধান করেছে। যখন ডিভগুলির একটিতে একাধিক শব্দ থাকে এবং তারা স্ক্রিনের প্রান্তে টেনে নিয়ে যায় তবে ডিভটি মোড়ানো হবে যাতে উভয় লাইনে একটি শব্দ থাকে। যাই হোক না কেন overflow: visible; white-space: nowrap;আমার জন্য কৌশল। ধন্যবাদ!
ট্রাইহার্ডার

4
এটি কাজ করেছিল কারণ তিনি কোষগুলি অবিচ্ছিন্ন করেছিলেন। প্রকৃতপক্ষে ভাসমান ডিভগুলি মোড়ানো থেকে দূরে রাখার কোনও সমাধান নয়
অ্যান্ডি

1

একমাত্র উপায় আমি এই কাজ করতে পরিচালিত করে থাকেন ব্যবহার করা overflow: visible;এবং width: 20000px;পিতা বা মাতা উপাদান। সিএসএস স্তর 1 এর সাথে এটি করার কোনও উপায় নেই যার বিষয়ে আমি অবগত এবং আমি এই ভাবতে অস্বীকার করেছিলাম যে আমাকে সিএসএস স্তর 3 সহ সমস্ত গং-হো যেতে হবে নীচের উদাহরণটিতে 18 টি মেনু রয়েছে যা আমার 1920x1200 রেজোলিউশন এলসিডি ছাড়িয়ে গেছে , যদি আপনার স্ক্রিনটি বড় হয় তবে প্রথম স্তরের মেনু উপাদানের সদৃশ করুন বা ব্রাউজারটিকে কেবল আকার দিন। বিকল্পভাবে এবং ব্রাউজার সামঞ্জস্যের সামান্য নিম্ন স্তরের সাথে আপনি CSS3 মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

এখানে একটি সম্পূর্ণ অনুলিপি / পেস্ট উদাহরণ প্রদর্শনের ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>

আমি যখন width:100%width:1000px
উর্ধ্বমুখী

@ নিক.এমসিডার্মাইড আমি এক কারণে 20 কে পিক্সেল ব্যবহার করেছি, 4K স্ক্রিনগুলি প্রকাশিত হওয়ার সাথে সাথে আপনি জানেন যে অবশেষে 8K থাকবে এবং তাই পর্দা আরও বেশি না হওয়া অবধি সেই অতিরিক্ত বছর ধরে কাজ করার জন্য একটি উন্মাদ উচ্চ সংখ্যা নিয়ে কাজ করা ভাল work জীবন থেকে নিজের সমাধান। ;-)
জন

বোঝা ... আমি খুশি আমি এটি মোড়ানো বন্ধ করতে পেয়েছিলাম। সিএসএস-এটি আমাকে এফ 12 সরঞ্জামের সাহায্যে বাদামও চালায়। আমি জানি না যে এগুলি ছাড়া কেউ কীভাবে কিছু করেছে।
নিক.এমসিডার্মাইড

4
ভবিষ্যতের রেফারেন্সের জন্য: একটি বিশাল প্রস্থ / উচ্চতা ব্যবহার করা অত্যন্ত অকার্যকর কারণ ব্রাউজারটি এখনও একটি অপ্রয়োজনীয় বড় বাক্সকে মেমরিতে সঞ্চয় করে। থেকে ধারক সেট white-space: nowrap;করুন এবং শিশুদের display: inline-block;যেমন ইতিমধ্যে অন্যান্য উত্তর বলেন (অথবা ফিরে আসবে display: table;এবং display: table-cell;)।
gio

main > * > * {background-color: #000;}O_o
theflowersoftime

0

আমার জন্য (বুটস্ট্র্যাপ ব্যবহার করে) কেবলমাত্র কাজটি শেষ কক্ষে সেট display:absolute;z-index:1করা ছিল ।


4
display:absoluteসিএসএস বৈধ নয়
caiosm1005

সম্ভবত বোঝানো অবস্থান
ভালঞ্জান

-1

আমার কিছুটা একই সমস্যা ছিল যেখানে একটি সীমাবদ্ধ অঞ্চলটি একটি ফ্লোটে একটি চিত্র নিয়ে গঠিত: বাম ব্লক এবং একটি নন-ফ্লোট টেক্সট ব্লক। অঞ্চলটির তরল প্রস্থ রয়েছে। নকশা করে পাঠ্যটি চিত্রের ডান পাশ দিয়ে মোড়ানো হবে। সমস্যাটি ছিল, পাঠ্যটি <hh> ট্যাগ দিয়ে শুরু হয়েছিল, যার প্রথম শব্দটি ছোট শব্দটি "থেকে"। আমি যখন উইন্ডোটিকে একটি ছোট প্রস্থে আকার পরিবর্তন করলাম, অবিবাহিত পাঠ্যটি নির্দিষ্ট প্রস্থের জন্য কেবল মোড়ানো অংশের শীর্ষে কেবল "থেকে" শব্দটি রেখে যাবে, বাকী পাঠ্যটি ভাসমানের নীচে চেপে গেছে been ব্লক আমার সমাধানটি হ'ল ট্যাগটির প্রথম শব্দটি বৃহত করে তুলুন, এই কোডটি দিয়ে << span style = "अस्पष्टতা: 0;"> x </span> এর সাহায্যে স্থান অনুসরণ করে। প্রভাবটি ছিল "থেকে", "ফর্মএক্সেক্সট ওয়ার্ড" এর পরিবর্তে প্রথম শব্দটি তৈরি করা, যেখানে "এক্স", অদৃশ্য হওয়ার কারণে একটি জায়গার মতো দেখাচ্ছে। এখন আমার প্রথম শব্দটি যথেষ্ট বড় ছিল যে বাকী পাঠ্য ব্লকটি রেখে দেওয়া উচিত নয়।

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