Kayan div'lerin kaydırılmasını durdurun

Question 1

Tarayıcı sığamayacak kadar dar ise sarmayan bir dizi div'e (hücre) sahip olmak istiyorum.

Stack'i araştırdım ve basit bir css sorusu olması gerektiğini düşündüğüm şeye çalışan bir cevap bulamadım.

Hücreler belirli genişliğe sahiptir. Bununla birlikte, satırın genişliğini belirtmek istemiyorum, genişlik otomatik olarak alt hücrelerinin genişliği olmalıdır.

Görüntü alanı satırları barındıramayacak kadar darsa, div kaydırma çubuklarıyla dolmalıdır.

Başka bir yerde gördüğüm birçok çözümü denediğim için lütfen yanıtınızı çalışan kod pasajı olarak sağlayın (örneğin genişliği belirtin:% 100 ve işe yaramıyor gibi görünüyorlar).

Yalnızca HTML / CSS çözümü arıyorum, JavaScript yok.

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

Snippet'i genişlet

Şu anda satır genişliğini gerçekten çok büyük bir sayıya kodluyorum.

Question 2

CSS özelliği display: inline-blockbu ihtiyacı karşılamak için tasarlanmıştır. Bununla ilgili biraz bilgiyi burada okuyabilirsiniz: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Aşağıda kullanımına bir örnek verilmiştir. Temel unsurlar, rowelementin sahip olması white-space: nowrapve cellelementlerin sahip olmasıdır display: inline-block. Bu örnek çoğu büyük tarayıcıda çalışmalıdır; burada bir uyumluluk tablosu mevcuttur: 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

Satırda tanımlamak istersiniz, min-widthböylece tarayıcı yeniden boyutlandırıldığında bunun altına inmez ve kaydırmaz.

Question 4

John'un cevabını okuduktan sonra, aşağıdakilerin bizim için işe yaradığını keşfettim (genişliği belirtmeyi gerektirmiyordu):

<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

Bunu başarabilmemin tek yolu , ana öğeyi overflow: visible;ve width: 20000px;üzerinde kullanmaktır . Bildiğim kadarıyla CSS seviye 1 ile bunu yapmanın bir yolu yok ve tamamen CSS seviye 3 ile gitmem gerektiğini düşünmeyi reddettim. Aşağıdaki örnekte 1920x1200 çözünürlüklü LCD ekranımın ötesine uzanan 18 menü var , ekranınız daha büyükse, sadece birinci kademe menü öğelerini kopyalayın veya tarayıcıyı yeniden boyutlandırın. Alternatif olarak ve biraz daha düşük seviyelerde tarayıcı uyumluluğu ile CSS3 medya sorgularını kullanabilirsiniz.

İşte tam bir kopyala / yapıştır örnek gösterimi ...

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

(Ön yükleme alanı kullanarak) Benim için çalıştı tek şey batıyordu display:absolute;z-index:1üzerinde son hücreye.

Question 7

Sınırlı bir alanın bir kayan nokta içindeki bir görüntüden oluştuğu biraz benzer bir sorun yaşadım: sol blok ve kayan olmayan bir metin bloğu. Alan, akışkan bir genişliğe sahiptir. Metin, tasarım gereği görüntünün sağ tarafına sarılır. Sorun, metnin ilk kelimesi küçük "From" olan bir <h2> etiketiyle başlamasıydı. Pencereyi daha küçük bir genişliğe yeniden boyutlandırdığımda, kayan olmayan metin, belirli bir genişlik aralığı için, sarma alanının üst kısmında yalnızca "Başlangıç" kelimesini bırakırdı, metnin geri kalanı kayan sayfanın altına sıkıştırılmıştır. blok. Çözümüm, etiketin ilk kelimesini, onu takip eden boşluğu bu kodla (<span style = "opacity: 0;"> x </span>) değiştirerek büyütmekti. Bunun etkisi, "From", "FromxNextWord" yerine ilk kelimeyi yapmaktı, "x" görünmez olduğundan, bir boşluk gibi görünüyordu. Şimdi ilk sözüm, metin bloğunun geri kalanı tarafından terk edilmeyecek kadar büyüktü.