用 <div> 和百分比制作标志答案

【问题标题】：Making a flag with <div> and percentages用 <div> 和百分比制作标志
【发布时间】：2020-04-04 12:56:35
【问题描述】：

我需要用 HTML 和 CSS 制作一个标志。

我遇到了一些问题：

旗帜的每种颜色都必须是高度的 33.3%。
更改浏览器大小时，标志需要保持相同的形状（它需要填满整个页面）。

标志的最小宽度为 500 像素，最小高度为 300 像素。

body {
  margin: 0;
  padding: 0;
}

#red {
  background-color: red;
  height: 33, 3%;
  width: 500px;
}

#white {
  background-color: white;
  height: 33, 3%;
  width: 500px;
}

#blue {
  background-color: blue;
  height: 33, 3%;
  width: 500px;
}

<div id="red"></div>
<div id="white"></div>
<div id="blue"></div>

【问题讨论】：

height: 33,3% 它应该是 height:33.3% ?
这里的标志是什么意思？如果要使用真正的标志，请使用 img 标签。假设您在这里指的是 div，我仍然不确定您在“我遇到了一些问题：”部分中要求的是什么。请重新表述您的问题。
提示：使用 'px' 定义任何测量值，如高度/宽度，不会使您的 HTML 元素响应浏览器/设备。尝试改用 %。

标签： html css percentage

【解决方案1】：

只需在 html 元素上使用背景：

html {
  min-height:300px;
  min-width:500px;
  height:100%;
  background:
    linear-gradient(red,red)   top,
    linear-gradient(blue,blue) bottom;
  background-size:100% 33.3%;
  background-repeat:no-repeat;
}

【讨论】：

它是一个包含三层的标志，那么我如何用三种颜色做到这一点？
谢谢你，完成了这项工作！

【解决方案2】：

你可以试试下面的代码，请注意：

将您的标记包装在带有 id 标志的 div 中并设置其大小
测量值应该写成33.3%，你几乎没有语法错误
min-width 和 min-height 设置元素的最小尺寸

body {
  margin: 0;
  padding: 0;
}

#red {
  background-color: red;
  height: 33.3%;
  width: 500px;
}

#white {
  background-color: white;
  height: 33.3%;
  width: 500px;
}

#blue {
  background-color: blue;
  height: 33.3%;
  width: 500px;
}

#flag {
  min-width: 500px;
  width: 100%;
  min-height: 300px;
  height: 300px;
}

<div id="flag">
  <div id="red"></div>
  <div id="white"></div>
  <div id="blue"></div>
</div>

【讨论】：

问题是，我只能使用三个div。所以不允许在这三个周围放置一个div。
你有权访问父标签吗？

【解决方案3】：

最好和最有效的方法是将所有三个 div 放在一个父 div 中并处理它。这是代码sn-p：

CSS 文件：

#red
{
    background-color: red;
    height: 33.3vh;
}
#white
{
    background-color: white;
    height: 33vh;
}
#blue
{
    background-color: blue;
    height: 33.3vh;  
}
#parent {
    min-height: 300px;
    min-width: 500px;
}

HTML 文件

<div id="parent">
 <div id="red"></div>
        <div id="white"></div>
        <div id="blue"></div>
</div>

这是 Stackblitz 的工作代码链接： https://stackblitz.com/edit/angular-y1jfby

【讨论】：

谢谢你的回复，问题是我只能使用三个div，不能再用了。
在此处查看更新的代码：stackblitz.com/edit/angular-xoqvny
谢谢你，哈哈是的 CSS 很性感！