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

Question 1

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

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

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

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

দয়া করে আপনার উত্তরটি ওয়ার্কিং কোড স্নিপেট হিসাবে সরবরাহ করুন, যেহেতু আমি অন্য কোথাও দেখেছি এমন সমাধানের অনেক চেষ্টা করেছি (যেমন প্রস্থ নির্দিষ্ট করুন: 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>

স্নিপেট প্রসারিত করুন

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

Question 2

সিএসএস সম্পত্তিটি 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>

Question 3

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

Question 4

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

<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>

Question 5

একমাত্র উপায় আমি এই কাজ করতে পরিচালিত করে থাকেন ব্যবহার করা 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>

Question 6

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

Question 7

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