क्षैतिज स्क्रॉलिंग के साथ ही विभाजित करें

Question 1

मेरे पास एक निश्चित चौड़ाई का DIV है जिसमें कई स्तंभों के साथ एक तालिका है, और उपयोगकर्ता को DIV के भीतर क्षैतिज रूप से तालिका को स्क्रॉल करने की अनुमति देने की आवश्यकता है।

इसके लिए केवल IE6 और IE7 (आंतरिक क्लाइंट एप्लिकेशन) पर काम करना होगा।

IE7 में निम्नलिखित काम करता है:

overflow-x: scroll;

किसी को भी IE6 में काम करता है कि एक समाधान के साथ मदद कर सकता हूँ?

Question 2

समाधान काफी सीधे आगे है। यह सुनिश्चित करने के लिए कि हम तालिका में कोशिकाओं की चौड़ाई को प्रभावित नहीं करते हैं, हम श्वेत-स्थान को बंद कर देंगे । यह सुनिश्चित करने के लिए कि हमें एक क्षैतिज स्क्रॉल पट्टी मिलती है, हम अतिप्रवाह-एक्स चालू करेंगे । और बस यही सब है:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

आप अंत-परिणाम यहां , या नीचे एनीमेशन में देख सकते हैं । यदि तालिका आपके कंटेनर की ऊंचाई निर्धारित करती है, तो आपको स्पष्ट रूप से सेट overflow-yकरने की आवश्यकता नहीं होनी चाहिए hidden। लेकिन समझें कि यह भी एक विकल्प है।

Question 3

मुझे काम करने के लिए चयनित उत्तर नहीं मिला, लेकिन थोड़ी खोजबीन के बाद , मैंने पाया कि क्षैतिज स्क्रॉलिंग डिव का होना आवश्यक हैwhite-space: nowrap सीएसएस में ।

यहाँ पूरा काम कोड है:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

Question 4

overflow-x: scroll;
overflow-y: hidden;

संपादित करें:

इससे मेरा काम बनता है:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

Question 5

क्षैतिज स्क्रॉल के लिए, इन दो गुणों को ध्यान में रखें:

overflow-x:scroll;
white-space: nowrap;

कार्य लिंक देखें: मुझे क्लिक करें

एचटीएमएल

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

सीएसएस

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

Question 6

इसे इस्तेमाल करे:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

सीएसएस:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

सफेद-स्थान: नॉरैप; संपत्ति न आप पाठ लपेटो। केवल एक उदाहरण के लिए यहां देखें: https://codepen.io/oezkany/pen/YoVgYK