Question

我是HTML和CSS的初学者。因此，我只对该主题有非常基本的了解。从我的一位教授那里得到了一个任务，就是用花盆制作一朵花＃34;使用仅 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>

Answer 1

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

要创建固定宽度，无论窗口大小如何都使用px。

例如：

class Appointment : Object {
    dynamic var type = ""
    dynamic var date = NSDate()
}

class AppointmentsInWeek : Object {
    dynamic var startDate = NSDate()
    dynamic var endDate = NSDate()

    lazy var appointments: Results<Appointment> = {
        // This implementation assumes you can get a reference
        // to the Realm storing your Appointments somehow
        return appointmentsRealm.objects(Appointments.self).filter(NSPredicate(format: "(date >= %@) AND (date < %@)", self.startDate, self.endDate))
    }()

    override static func ignoredProperties() -> [String] {
        return ["appointments"]
    }
}

制作<div>元素的排列（位置和大小），与浏览器窗口大小/分辨率无关

1 个答案: