रैपिंग से फ़्लोटिंग डिव को रोकें

Question 1

मैं डिव (कोशिकाओं) की एक पंक्ति रखना चाहता हूं जो कि लिपटे नहीं अगर ब्राउज़र उन्हें फिट करने के लिए बहुत संकीर्ण है।

मैंने स्टैक को खोजा है, और जो मुझे लगता है कि एक साधारण सीएसएस प्रश्न होना चाहिए, उसके लिए एक काम का जवाब नहीं मिल सका।

कोशिकाओं की चौड़ाई निर्दिष्ट है। हालाँकि मैं पंक्ति की चौड़ाई निर्दिष्ट नहीं करना चाहता, लेकिन चौड़ाई स्वचालित रूप से इसकी बाल कोशिकाओं की चौड़ाई होनी चाहिए।

यदि व्यूपोर्ट पंक्तियों को व्यवस्थित करने के लिए बहुत संकीर्ण है, तो div को स्क्रॉलबार के साथ ओवरफ्लो करना चाहिए।

कृपया अपना उत्तर कार्य कोड स्निपेट के रूप में प्रदान करें, क्योंकि मैंने बहुत सारे समाधानों की कोशिश की है जो मैंने कहीं और देखे हैं (जैसे कि चौड़ाई निर्दिष्ट करें: 100% और वे काम नहीं करते हैं)।

मैं एक HTML / CSS केवल समाधान के लिए देख रहा हूँ, कोई जावास्क्रिप्ट नहीं।

.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-sucks/

नीचे इसके उपयोग का एक उदाहरण है। प्रमुख तत्व वे हैं जो 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

मुझे कुछ ऐसी ही समस्या थी जहाँ एक बंधे हुए क्षेत्र में एक फ्लोट में एक छवि शामिल थी: लेफ्ट ब्लॉक और एक नॉन-फ्लोट टेक्स्ट ब्लॉक। क्षेत्र में एक तरल पदार्थ की चौड़ाई है। पाठ, डिजाइन के अनुसार, छवि के दाईं ओर लपेटा जाएगा। परेशानी यह थी कि, पाठ <h2> टैग के साथ शुरू हुआ, जिसमें से पहला शब्द "फ्रॉम" से छोटा शब्द है। जैसा कि मैंने विंडो को एक छोटी चौड़ाई में आकार दिया, गैर-फ्लोट किए गए पाठ, चौड़ाई की एक निश्चित सीमा के लिए, केवल "से" शब्द को रैप क्षेत्र के शीर्ष पर छोड़ दें, बाकी टेक्स्ट फ्लोट के नीचे निचोड़ा हुआ है। खंड मैथा। मेरा समाधान टैग का पहला शब्द बड़ा करना था, इस कोड के साथ उस स्थान को प्रतिस्थापित करके <span style = "opacity: 0;"> x </ span>। प्रभाव "से", "FromxNextWord" के बजाय पहला शब्द बनाने के लिए था, जहां "x", अदृश्य होने के नाते, एक स्थान की तरह दिखता था। अब मेरा पहला शब्द काफी बड़ा था, जिसे बाकी के टेक्स्ट ब्लॉक ने नहीं छोड़ा था।