yap kaydırma çubuğu yerine böyle düzenini kullanırken düzen

Question

ezilme tespit edilecek:

div { 
 
    width: 25vw; 
 
    height: 150vh; 
 
    float: left; 
 
    background: rgb(30,120,210) 
 
} 
 
div:nth-child(2n+2) { 
 
    background: rgb(210,120,30) 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

scrollbar tasarım ezer. Kaydırma çubuğu olmadan sadece iyi çalışır, her öğe ekran genişliğinin 1/4'ünü alır. Son bir öğeye width: calc(25vw - 17px) eklemek bir çözüm olurdu ama benim kılavuzum bundan daha karmaşık. Bu yüzden, eğer kaydırıcının position: fixed'a benzer bir kuralı yapabilmesinin mümkün olduğunu düşünürdüm, bu yüzden onları ezmek yerine öğelerin üstüne gider. Veya mümkünse, kaydırma çubuğunu kaldırmak için daha iyi. Bu sorun Linux Firefox veya Chrome'da görünmüyor.

Answer 1

Neden width: 25vw yerine width: 25% kullanıyorsunuz? Ardından kaydırma çubuğu dikkate alınacaktır.

Çalışma örneği:

div { 
 
    width: 25%; 
 
    height: 150vh; 
 
    float: left; 
 
    background: rgb(30,120,210) 
 
} 
 
div:nth-child(2n+2) { 
 
    background: rgb(210,120,30) 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Answer 2

bunu basitçe flex ve min-width özellikleri çözülebilir flexbox kullanıyorsanız:

body { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
div { 
 
    flex: 1; 
 
    height: 150vh; 
 
    background: #123; 
 
    min-width: 25%; 
 
    max-width: 25%; 
 
} 
 

 
div:nth-child(odd) { 
 
    background: #222; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

max-width, satırdaki tüm yeni öğeler için kuralı takip edecek şekilde kullanılabilir.

PS: tarayıcılar arası test için prefix esnek özelliklerini unutmayın.