html - 网格布局( float )搞砸了-6ren

html - 网格布局( float )搞砸了

转载作者：行者123 更新时间：2023-11-28 06:04:34

重新缩放浏览器时，布局中的网格开始跳动。我试过使用 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>

最佳答案

通过将两个较大正方形的高度从 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;
}

关于html - 网格布局( float )搞砸了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36536002/

文章推荐： javascript - X-Content-Type-Options = nosniff 解决方法

文章推荐： ios - 我如何通知客户端以便某个帖子不再存在？

文章推荐： jquery - 如何设置我需要的表单字段的样式？

真正“搞”懂HTTP协议10之缓存控制
　　HTTP缓存相关的问题好像是前端面试中比较常见的问题了，上来就会问什么cache-control字段有哪些，有啥区别啥的。嗯……说实话，我觉得至少在本篇来说，HTTP缓存还算不上复杂，只是字段稍
真正“搞”懂HTTP协议11之代理服务
　　代理，其实全称应该叫做代理服务器，它是客户端与服务器之间得中间层，本质上来说代理就是一个服务器，在HTTP的链路中插入的一个中间环节，就是代理服务器啦。所谓的代理服务就是指：服务本身不生产内容，
真正“搞”懂HTTP协议12之缓存代理
　　我们在前两篇的内容中分别学习了缓存和代理，大致了解了缓存有哪些头字段，代理是如何服务于服务器和客户端的，那么把两者结合起来，代理缓存，也就是说代理服务器也可以缓存，当客户端请求数据的时候，未必一
真正“搞”懂HTTP协议13之HTTP2
　　在前面的章节，我们把HTTP/1.1的大部分核心内容都过了一遍，并且给出了基于Node环境的一部分示例代码，想必大家对HTTP/1.1已经不再陌生，那么HTTP/1.1的学习基本上就结束了。这两
真正“搞”懂HTTP协议14之HTTP3
　　我们前一篇学习了HTTP/2，相比于HTTP/1，HTTP/2在性能上有了大幅的改进，但是HTTP/2因为底层还是基于TCP协议的，虽然HTTP/2在应用层引入了流的概念，利用多路复用解决了队头
真正“搞”懂HTTPS协议15之安全的定义
　　前面我们花了很大的篇幅来讲HTTP在性能上的改进，从1.0到1.1，再到2.0、3.0，HTTP通过替换底层协议，解决了一直阻塞性能提升的队头阻塞问题，在性能上达到了极致。　　那么，接下
真正“搞”懂HTTPS协议16之安全的实现
　　上一篇噢，我们搞明白了什么是安全的通信，这个很重要，特别重要，敲黑板！！　　然后，我们还学了HTTPS到底是什么，以及HTTPS真正的核心SSL/TLS是什么。最后我们还聊了聊TLS的实
真正“搞”懂HTTPS协议17之TLS握手
　　经过前两章的学习，我们知道了通信安全的定义以及TLS对其的实现~有了这些知识作为基础，我们现在可以正式的开始研究HTTPS和TLS协议了。嗯……现在才真正开始。　　我记得之前大概聊过，当
真正“搞”懂HTTP协议07之队头阻塞真的很烦人
　　这一篇文章，我们核心要聊的事情就是HTTP的对头阻塞问题，因为HTTP的核心改进其实就是在解决HTTP的队头阻塞。所以，我们会讲的理论多一些，而实践其实很少，要学习的头字段也只有一个，我会在最开始
真正“搞”懂HTTP协议09之这个饼干不能吃
　　我们在之前的文章中介绍HTTP特性的时候聊过，HTTP是无状态的，每次聊起HTTP特性的时候，我都会回忆一下从前辉煌的日子，也就是互联网变革的初期，那时候其实HTTP不需要有状态，就是个浏览页面
真正“搞”懂HTTP协议05之What'sHTTP？
　　前面几篇文章，我从纵向的空间到横向的时间，再到一个具体的小栗子，可以说是全方位，无死角的覆盖了HTTP的大部分基本框架，但是我聊的都太宽泛了，很多内容都是一笔带过，再加上一句后面再说就草草结束了。
搞 Go 要了解的 2 个 Header，你知道吗？
大家好，我是煎鱼。在 Go 语言中总是有一些看上去奇奇怪怪的东西，咋一眼一看感觉很熟悉，但又不理解其在 Go 代码中的实际意义，面试官却爱问... 今天要给大家介绍的是 SliceHead

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网格布局( float )搞砸了