html - 使 <div> 元素的排列(位置和大小)独立于浏览器窗口大小/分辨率-6ren

html - 使
元素的排列(位置和大小)独立于浏览器窗口大小/分辨率

转载作者：太空宇宙更新时间：2023-11-04 08:52:29

25

4

我是 HTML 和 CSS 的初学者。因此，我对这个主题只有非常基础的知识。我的一位教授给我分配了一项任务，即使用仅 HTML 和 CSS 创建“带花盆的花”。我们不允许嵌入图像或使用 canvas、svg、bootstrap 或 javascript。

在互联网的帮助下，我已经能够完成这项任务。我用过<div>元素来完成任务，因为我不知道任何其他方式(所以我愿意接受建议)。但是我注意到，当我更改浏览器窗口的大小时，花盆看起来不再像花盆了。

我的问题:如何让元素留在原处？

(请看代码和截图)

Screenshot

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Flower</title>
</head>

<body>


<!–– Top left petal-->

<div id="div1">
    <style>
    #div1 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        border: 2.5px solid black;
    }
    </style>
</div>

<!–– Top right petal-->

<div id="div2">
    <style>
    #div2 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-left:2.88%;
        border: 2.5px solid black;
    }
    </style>
</div>

<br>

<!–– Central Area of the flower-->

<div id="center">
    <style>
    #center {
        height: 70px;
        width:  6%;
        background-color:red;
        border-radius:50%;
        margin-top: 2%;
        margin-left:3.5%;
        border: 3px solid black;
    }
    </style>
</div>


<br> <br> <br> <br>


<!–– Bottom left petal--> 

<div id="div3">
    <style>
    #div3 {
        height: 60px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-top:-7.1%;
        border: 2.5px solid black;
    }
    </style>
</div>

<br> <br>

<!–– Curved Stem-->

<div id="stem">
    <style>
    #stem{
          width:350px; height:100px;  
          border:solid 5px #000;
          border-color:green transparent transparent transparent;
          border-radius: 50%/100px 100px 0 0;
          transform:rotate(90deg);
          -webkit-transform:rotate(90deg);
          margin-top:-2.6%;
          margin-left:-107px;
    }
    </style>
</div>

<!–– Bottom right petal-->

<div id="div4">
    <style>
    #div4 {
        height: 62px;
        width:  5%;
        background: orange;
        border-radius:40%;
        float:left;
        margin-left:8%;
        border: 2.9px solid black;
        margin-top:-15.6%;
    }
    </style>
</div>

<br>
<br> <br> <br>
<br> <br> <br> 
<br> <br> <br> 
<br> <br> <br>

<!–– Flower Pot-->

<div id="pot">
    <style>
    #pot {

        border-bottom: 100px solid;
        border-bottom-color:rgba(87,0,1,1.00);
        border-left: 50px solid transparent ;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
        margin-left:-10px;
        margin-top:-13.3%;
    }

    </style>
</div>

</body>
</html>

最佳答案

您使用的是百分比宽度，这意味着在 #div2 的情况下，宽度将等于浏览器窗口的 5%。

要创建无论窗口大小如何都保持不变的固定宽度，请使用 px。

例如:

#div2 {
        height: 60px;
        width:  200px;
        background: orange;
        border-radius: 40%; //This can stay as a %, not effected by window size
        float:left;
        margin-left: 10px;
        border: 2.5px solid black;
    }

关于html - 使 <div> 元素的排列(位置和大小)独立于浏览器窗口大小/分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43330059/

25

4

0

文章推荐： c - 多线程输出困惑

文章推荐： python - Django - 如何查询与 "listing"对象关联的所有用户

文章推荐： c - 直方图，频率的计算

文章推荐： css - 联系表格 7 "Send"按钮丢失

F# 排列
我需要在给定的列表上生成排列。我设法这样做 let rec Permute (final, arr) = if List.length arr > 0 then for x i
Java 排列
我正在尝试运行我的代码，以便它打印循环排列，尽管我目前只能让它执行第一个排列。它正确运行到我标记的点，但我看不出出了什么问题。我认为 while 循环中没有中断，但我不确定。确实需要一些帮助。 pac
JavaScript 排列
我正在尝试计算不包含连续字母的排列数。我的代码通过了像“aabb”(答案:8)和“aab”(答案:2)这样的测试，但没有通过像“abcdefa”这样的情况(我的答案:2520；正确答案:3600)。这
r - 使用条件对字符列进行排序/排列
我正在尝试使用 dplyr 的 arrange 根据条件对字符串进行排序。我想在一列上排列，但如果第二列等于一个值，则按升序排列，如果第二列等于另一个值，则按降序排列。我发现了几个类似的问题(其中一
r - 排列()不识别列名参数
在 R 中，我使用 dplyr更具体地说 arrange() . 不知何故 arrange功能没有按预期工作。在下面的示例中，我首先存储列的名称，然后将此变量作为参数传递给名为“my_functio
qml - GridLayout 排列
以下是我的 main.qml : Window { id: window visible: true width: 800 height: 480 title:
javascript - 找到两个数组的可用组合(排列？)
很难用谷歌搜索这个问题，因为我不确定这些概念叫什么，并且所有“两个数组/组的组合”SO 帖子都没有给我我期望的输出。数组示例: var array1 = ['Bob', 'Tina']; var a
使用两个列表的 Scala 排列
实现以下目标的最佳方法是什么？我有两个列表: val l1 = List("a", "b") val l2 = List(1, 2) 我想生成这个: List ( List(('a', 1)
使用递归的 JavaScript 排列
我知道互联网上有很多针对我的具体问题的解决方案，但我一直在尝试以特定的方式解决它，但它不起作用，我真的无法理解出了什么问题。就我而言，我只想打印排列。这是我的代码: a = "abc"; functi
具有输出列表长度的 Haskell 排列
我有这样的代码来创建排列: --unique permutation perm :: [t] -> [[t]] perm [] = [[]] perm (x:xs) = [(y:zs) | (y,ys
math - 如何高效找到nPr(排列)？
有没有比使用基本公式 n!/(n-r)! 更好的方法？就像我们对 nCr(组合) nCr = (n-l)Cr + (n-1)C(r-1) 一样？最佳答案这样怎么样:nPr = (n−1)Pr +
r - 来自不同集合的混合组合/排列
此问答的动机是 How to build permutation with some conditions in R . 到目前为止，已经有一些很好的 R 软件包，例如 RcppAlgos 和 arr
Erlang 列表理解、排列
我正在修改一本书中的排列示例。以下代码按预期工作。 perms([]) -> [[]]; perms(L) -> [[H|T] || H []; 它返回一个空列表。当我替换时，我得到了这个。
Java 排列 2
大约一周前，我问了一个关于帮助我解决这个问题的问题 Java permutations ，打印排列方法有问题。我已经整理了我的代码，并有一个现在可以工作的工作示例，尽管如果 5 位于数组中的第五个位置
python - 如何计算具有重复元素的列表的排列(排列)
我有一个包含重复元素的列表，即orig = [1,1,1,2,2,3]。我想创建一个derangement b = f(orig)，使得 b 中的每个位置值都与 orig 中的值不同: b[i] !
具有最少随机数的 Java 排列
我想生成一个 array a 的排列而且我不想使用实用功能，例如 java.util.Collections() . 排列应该是随机的，并且每个排列都应该有可能发生 - 但不需要均等分布的概率。以下
java - 排列、递归
我有一个作业:用户输入一个字符串，例如 ABCD，程序必须给出所有排列。我不希望整个代码只是一个提示。这是我到目前为止在他们那里得到的，我没有得到任何实现。以ABCD为例: 在本例中获取字符串长度的
Python Itertools 排列
我目前正在编写一个使用 itertools 的程序，其中的一部分似乎无法正常运行。我希望确定排列函数输出列表长度的输入等于它生成输出的列表长度。换句话说，我有 import itertools b =
python - Itertools 排列
我有一个列表 x=[1,2,3,4,5] 并且想查看这个列表的不同排列，一次取两个数字。 x=[1,2,3,4,5] from itertools import permutations y=list
python - 跨组无重复的组合/排列
我正在寻找 C 或 Python 代码来实现两个伪代码函数之一: function 1: list1 = [0,1,2] #any list of single-integer elements li

首页

博学

6Ren·AI

商城

html - 使
元素的排列(位置和大小)独立于浏览器窗口大小/分辨率

首页

博学

6Ren·AI

商城

html - 使 元素的排列(位置和大小)独立于浏览器窗口大小/分辨率

html - 使
元素的排列(位置和大小)独立于浏览器窗口大小/分辨率