Question

我有兴趣学习如何指定css样式，以便四个div总是填满浏览器的整个宽度，但是根据浏览器的宽度，将显示1,2或全部4个div每行。 Apple's website使用主要内容框下方的四个较小的内容框来完成此操作。

我使用@media尝试了这个，尽管这可能是完全错误的方法。

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>

        @media only screen and (min-width: 1068){
          #mainDiv {
          	background-color: red;
          	width: 100%;
          	height: 200px;
          }
           #div1 {
            background-color: blue;
            display: inline-block;
            width: 25%;
            height: 200px;
           }
          #div2 {
            background-color: green;
            display: inline-block;
            width: 25%;
            height: 200px;
          }
          #div3 {
            background-color: yellow;
            display: inline-block;
            width: 25%;
            height: 200px;
          }
          #div4 {
            background-color: purple;
            display: inline-block;
            width: 25%;
            height: 200px;
          }
        }

        @media only screen and (min-width: 735){
          #mainDiv {
            background-color: red;
            width: 100%;
            height: 200px;
          }
          #div1 {
            background-color: blue;
            display: inline-block;
            width: 50%;
            height: 200px;
          }
          #div2 {
            background-color: green;
            display: inline-block;
            width: 50%;
            height: 200px;
          }
          #div3 {
            background-color: yellow;
            display: inline-block;
            width: 50%;
            height: 200px;
          }
          #div4 {
            background-color: purple;
            display: inline-block;
            width: 50%;
            height: 200px;
          }
        }

        @media only screen and (max-width: 734){
          #mainDiv {
            background-color: red;
            width: 100%;
            height: 200px;
          }
          #div1 {
            background-color: blue;
            display: inline-block;
            width: 100%;
            height: 200px;
          }
          #div2 {
            background-color: green;
            display: inline-block;
            width: 100%;
            height: 200px;
          }
          #div3 {
            background-color: yellow;
            display: inline-block;
            width: 100%;
            height: 200px;
          }
          #div4 {
            background-color: purple;
            display: inline-block;
            width: 100%;
            height: 200px;
          }
        }

		</style>
	</head>
	<body>

      <div id="mainDiv">
      </div>

      <div id="div1">
      </div>
      
      <div id="div2">
      </div>
      
      <div id="div3">
      </div>
      
      <div id="div4">
      </div>

  	</body>
</html>

＆＃13;

Answer 1

您正在寻找media queries这是我放在一起的一个非常快速的例子。点击＆＃34;完整页面＆＃34;玩它并看看它是如何工作的。

这是基于您使用代码段更新的问题。我基本上将px添加到您的媒体查询中，并使用了max-width而不是max-width和min-width的组合。

＆＃13;

#mainDiv {
  background-color: red;
  width: 100%;
  height: 200px;
}
#fourDivWrapper {
    font-size: 0px; /* A hack to prevent the space between */
}
#fourDivWrapper div {
    font-size: 14px;
}
#div1 {
  background-color: blue;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div2 {
  background-color: green;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div3 {
  background-color: yellow;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div4 {
  background-color: purple;
  display: inline-block;
  width: 25%;
  height: 200px;
}

@media only screen and (max-width: 1067px){
  #div1 {
    background-color: blue;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div2 {
    background-color: green;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div3 {
    background-color: yellow;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div4 {
    background-color: purple;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
}

@media only screen and (max-width: 734px){
  #div1 {
    background-color: blue;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div2 {
    background-color: green;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div3 {
    background-color: yellow;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div4 {
    background-color: purple;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
}

＆＃13;

<div id="mainDiv">Main div</div>

<div id="fourDivWrapper">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
    <div id="div3">div 3</div>
    <div id="div4">div 4</div>
</div>

＆＃13;

以下是原始答案：

＆＃13;

html, body {
  margin: 0;
}

.column {
  float: left;
  width: 25%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid black;
}

@media (max-width: 1200px) {
  .column {
    width: 50%;
  }
}

@media (max-width: 720px) {
  .column {
    width: 100%;
  }
}

＆＃13;

<div class="wrapper">
    <div class="column">a</div>
    <div class="column">b</div>
    <div class="column">c</div>
    <div class="column">d</div>
</div>

＆＃13;

创建可调整大小的布局的最简单方法，例如苹果公司网站上的布局？

1 个答案: