Question

Html代码

<!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”的方式来确保在减少800px以下的屏幕时增加“section2”的宽度以适应te stcreen吗？如果是，怎么样？

Answer 1

您可以using media queries处理此问题。我建议遵循mobile first方法，如下所示：

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

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

Answer 2

您可以使用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>

CSS调整块大小以填充空白空间

2 个答案: