用<div>和百分比标记

2024-05-18 • 问答

我需要用HTML和CSS标记。

我遇到了一些问题：

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

该标志的最小宽度为500px，最小高度为300px。

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>

只需在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;
}

您可以尝试以下代码，请注意：

将标记包装在具有id标志的div中并设置其大小
测量值应写为33.3%，语法错误很少
最小宽度和最小高度设置元素的最小尺寸

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中并进行处理。这是代码段：

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>和百分比标记

ioiuioh 回答：用<div>和百分比标记

大家都在问