Sıvı Katmanlar - ekran: hiç çalışmaz

"Fluid Layers" ile oynamaya çalışıyorum ve pencereyi yeniden boyutlandırırken (genişliğini elle yeniden boyutlandırırken), şunu yapmak istiyorum: display: Hiçbiri Div'lerin birinde yok ama başarısız oluyor bunu yapmak için (sadece işe yaramıyor).Sıvı Katmanlar - ekran: hiç çalışmaz

Neden görüntülediğini söyler misiniz: 18. satırda hiç çalışmıyor? Ayrıca, bir konteynerin içine 3 blok yerleştirmek istediğimde DIVS kullanmalı mıyım? ya da benim için daha iyi bir fikrin var mı?

Herhangi birisini biliyorsanız, daha iyi/farklı Sıvı Katmanları uygulama fikirleri almaktan mutluluk duyarız. yardımın için teşekkürler.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
body 
{ 
    background-color: #FFFFFF; 
} 

/* Extra small devices (phones, up to 480px) */ 
@media (max-width: 480px) 
{ 
    body 
    { 
    background-color: #FFFFFF; 
    } 
    .col3 { display: none; } 
} 

/* Extra small devices (usually phones from 480px to 768px) */ 
@media (min-width: 481px) and (max-width: 767px) 
{ 
    body 
    { 
    background-color: yellow; 
    } 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991px) 
{ 
    body 
    { 
    background-color: #444; 
    } 
} 

/* Small devices (tablets/desktop, 768px and up) */ 
@media (min-width: 992px) and (max-width: 1199px) 
{ 
    body 
    { 
    background-color: green; 
    } 
} 

/* large desktops and up ----------- */ 
@media (min-width: 1200px) 
{ 
    body 
    { 
    background-color: lightblue; 
    } 
} 
</style> 
</head> 
<body> 

<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;"> 
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline- block">Text</div> 
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div> 
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div> 
</div> 

</body> 
</html>

kaynak

2016-04-05 Kosem

display: none; } '- https://jsfiddle.net/4uknmLe2/1/ – ASR

yerine seçicisi gibi bir kimliği bir sınıf kullandı:

İşte benim kodudur.

Ayrıca, tüm cols'lar için ortak stili, yaptığınız gibi satır içi stil yerine stil sayfasına taşıdım. , Bunun yerine id sınıf olarak, `# Col3 try { 'col3' kullandığınız hat 18 üzerinde

body { 
 
    background-color: #FFFFFF; 
 
} 
 
#col1, 
 
#col2, 
 
#col3 { 
 
    width: 29%; 
 
    padding: 0; 
 
    margin-left: 3%; 
 
    margin-right: 3%; 
 
    background-color: #FFF333; 
 
    display: inline-block; 
 
} 
 
/* Extra small devices (phones, up to 480px) */ 
 

 
@media (max-width: 480px) { 
 
    body { 
 
    background-color: #FFFFFF; 
 
    } 
 
    #col3 { 
 
    display: none; 
 
    } 
 
} 
 
/* Extra small devices (usually phones from 480px to 768px) */ 
 

 
@media (min-width: 481px) and (max-width: 767px) { 
 
    body { 
 
    background-color: yellow; 
 
    } 
 
} 
 
/* Small devices (tablets, 768px and up) */ 
 

 
@media (min-width: 768px) and (max-width: 991px) { 
 
    body { 
 
    background-color: #444; 
 
    } 
 
} 
 
/* Small devices (tablets/desktop, 768px and up) */ 
 

 
@media (min-width: 992px) and (max-width: 1199px) { 
 
    body { 
 
    background-color: green; 
 
    } 
 
} 
 
/* large desktops and up ----------- */ 
 

 
@media (min-width: 1200px) { 
 
    body { 
 
    background-color: lightblue; 
 
    } 
 
}

<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;"> 
 
    <div id="col1">Text</div> 
 
    <div id="col2">Text</div> 
 
    <div id="col3">Text</div> 
 
</div>

kaynak

2016-04-05 10:44:59 dimshik

Sıvı Katmanlar - ekran: hiç çalışmaz

cevap

İlgili konular