网格布局（浮动）搞砸了

时间：2016-04-10 21:57:10

标签： html5 css3

重新调整浏览器时，布局中的网格会开始跳转。 我尝试过使用masonry.js，但它似乎不支持比例缩放（高度和宽度需要按固定宽高比放大/缩小）。问题是花车吗？

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  margin: 0 auto;
  background-color: #f3f3f3;
}
/* ---- grid ---- */

/* container defines margins and width */

.container {
  margin: 0 auto;
  max-width: 1200px;
  margin-top: 250px;
  height: 1200px;
}
/* outer container will define aspect ratio */

.outer {
  position: relative;
  width: 100%;
}
.outer.r4x3 {
  padding-top: 30%;
  /* "height" will be 3/4 of width */
}
/* inner container positioned absolutely and holds content */

.outer .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* example content */

.little-box {
  float: left;
  width: 11.111%;
  height: 33%;
  border: 2px solid #f3f3f3;
}
.little-box-width-2 {
  width: 22.222%;
}
.little-box-width-3 {
  width: 33.333%;
}
.little-box-width-4 {
  width: 44.444%;
}
.little-box-height-2 {
  height: 66%;
}
.little-box-height-3 {
  height: 99%;
}
/* just for display purposes... */

.inner::after {
  content: attr(data-size);
  position: absolute;
  left: 0;
  top: -1em;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/grid.css">
</head>

<body>
  <header class="header">
  </header>
  <div class="container">
    <div class="outer r4x3">
      <div class="inner">
        <div class="little-box" style="background-color: rgb(251,170,25);">
          <img src="img/lege.png" style="display: block; margin: 0 auto; width:auto;max-height:100%">
        </div>
        <div class="little-box little-box-width-4">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box little-box-width-2">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/done/jobs.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box little-box-height-3" style="border: none;">
          <div class="little-box" style="width: 100%;height: 33%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
          <div class="little-box" style="width: 100%;height: 33%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
          <div class="little-box" style="width: 100%;height: 33%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
        </div>
        <div class="little-box little-box-width-2 little-box-height-3">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box little-box-width-4 little-box-height-3">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <a href="profil2.html">
            <img src="img/test.jpg" style="width: 100%;height: 100%">
          </a>
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style=" background-color: rgb(255, 188, 0);"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style="background-color: rgb(14, 182, 211);"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box little-box-height-2" style="float: right;background-color: rgb(156, 89, 184);"></div>
        <div class="little-box little-box-height-3 little-box-width-2" style="border: none;">
          <div class="little-box" style="width: 50%;height: 33%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
          <div class="little-box" style="width: 50%;height: 33%;">
            <img src="img/test.jpg" style="width: 100%;height: 100%">
          </div>
          <div class="little-box" style="width: 100%;height: 66%;background-color: yellow;"></div>
        </div>
        <div class="little-box little-box-height-2" style="border: none;">
          <div class="little-box" style="width: 100%;height: 50%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
          <div class="little-box" style="width: 100%;height: 50%;">
            <img src="img/test.jpg" style="width:100%;height:100%;">
          </div>
        </div>
        <div class="little-box little-box-width-3 little-box-height-2">
          <a class="popup-youtube" href="https://www.youtube.com/watch?v=NFTaiWInZ44">
            <img src="img/youtube.png" style="height:100%; width:100%;">
          </a>
        </div>
        <div class="little-box" style="background-color: rgb(212, 74, 38)"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style="background-color: rgb(212, 74, 38)"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style="background-color: rgb(150, 166, 166);"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style="background-color: rgb(212, 74, 38);"></div>
        <div class="little-box" style="background-color: rgb(241, 196, 15);"></div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box">
          <img src="img/test.jpg" style="width:100%;height:100%;">
        </div>
        <div class="little-box" style="background-color: rgb(47, 204, 113);"></div>
      </div>
    </div>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

通过将两个较大的正方形的高度从99％高度更改为98％来修复。看起来几乎所有浏览器在重新缩放时都有计算高度的问题。

修正了css：

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  margin: 0 auto;
  background-color: #f3f3f3;
}
/* ---- grid ---- */

/* container defines margins and width */

.container {
  margin: 0 auto;
  max-width: 1200px;
  margin-top: 250px;
  height: 1200px;
}
/* outer container will define aspect ratio */

.outer {
  position: relative;
  width: 100%;
}
.outer.r4x3 {
  padding-top: 30%;
  /* "height" will be 3/4 of width */
}
/* inner container positioned absolutely and holds content */

.outer .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* example content */

.little-box {
  float: left;
  width: 11.111%;
  height: 33%;
  border: 2px solid #f3f3f3;
}
.little-box-width-2 {
  width: 22.222%;
}
.little-box-width-3 {
  width: 33.333%;
}
.little-box-width-4 {
  width: 44.444%;
}
.little-box-height-2 {
  height: 66%;
}
.little-box-height-3 {
  height: 98%;
}
/* just for display purposes... */

.inner::after {
  content: attr(data-size);
  position: absolute;
  left: 0;
  top: -1em;
}

相关问题
最新问题