CSS调整块，使其充满空隙

HTML代码CSS调整块，使其充满空隙

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="monstyle.css" /> 
    </head> 
    <body> 
     <section id="section1"> 

     </section> 

     <section id="section2"> 

     </section> 
    </body> 
</html>

CSS代码

#section1 { 
    height: 300px; 
    width: 50%; 
    min-width: 400px; 
    background-color: blue; 
    display: inline-block; 
} 
#section2 { 
    height:100px; 
    width: 40; 
    min-width: 400px; 
    background-color: red; 
    display: inline-block; 
}

我的问题是有没有一个 “纯CSS” 的方式，使确定当将屏幕缩小到800像素以下时，“section2”的宽度将增加到适合屏幕的程度？如果是，如何？

来源

2015-12-21 Ninda

' “第2节” 的宽度将增加“ - 你可能意味着“减少”？ – nicael

你的意思是身高：100％？ –

是的，可以的，第一部分使用float：left和2nd set margin-left：<第一部分的宽度>。这应该解决您的问题 – Manivannan

您可以使用Flexbox的：

body { 
 
    display: flex; /* Magic begins */ 
 
    flex-wrap: wrap; /* Allow multiple lines */ 
 
} 
 
#section1 { 
 
    flex: 1 400px; /* Start at 400px, grow to fill available space */ 
 
    height: 300px; 
 
    background-color: blue; 
 
} 
 
#section2 { 
 
    flex: 1 400px; /* Start at 400px, grow to fill available space */ 
 
    height: 100px; 
 
    background-color: red; 
 
}

<section id="section1"></section> 
 
<section id="section2"></section>

来源

2015-12-21 15:36:04 Oriol

上面的CSS代码工作正常 – Ninda

您可以通过using media queries来处理此问题。我建议遵循mobile first方法，像这样：

#section2 { 
    width: 100%; /* this might not be necessary */ 
}  

@media (min-width: 800px) { 
    #section2 { 
     width: 40%; 
     min-width: 400px; 
    } 
}

来源

2015-12-21 14:49:48

如果你把第2部分的宽度100％，它将保持在它自己的行Biginning，但我正在寻找的方式来动态增加宽度从40％到100％，减少浏览器屏幕的宽度说800px – Ninda

CSS调整块，使其充满空隙

回答

相关问题