Html 在另一个矩形内制作矩形并定位元素_Html_Css_Svg

Html 在另一个矩形内制作矩形并定位元素

html css svg

Html 在另一个矩形内制作矩形并定位元素,html,css,svg,Html,Css,Svg,我试图编写一个简历模板，只是为了学习HTML和CSS的基本知识。然而，我有一个问题，当涉及到定位一个矩形内的另一个。我已经搜索了几个小时，以及如何修复这个问题，但不知道为什么它根本没有出现。我希望矩形显示在蓝色的上方，但在“名称”文本下方，就像一个突出显示条我相信这与我如何定位我的元素有关。我也尝试过使用z-index，但我所做的任何更改都不起作用另外，作为一个快速跟进，我想知道为什么我不能对齐矩形中心的文本“Name”。我试过做文本对齐：居中，但也没用。我觉得我在这两个问题上缺少了一个主要

我试图编写一个简历模板，只是为了学习HTML和CSS的基本知识。然而，我有一个问题，当涉及到定位一个矩形内的另一个。我已经搜索了几个小时，以及如何修复这个问题，但不知道为什么它根本没有出现。我希望矩形显示在蓝色的上方，但在“名称”文本下方，就像一个突出显示条

我相信这与我如何定位我的元素有关。我也尝试过使用z-index，但我所做的任何更改都不起作用

另外，作为一个快速跟进，我想知道为什么我不能对齐矩形中心的文本“Name”。我试过做文本对齐：居中，但也没用。我觉得我在这两个问题上缺少了一个主要的概念。如有任何见解，将不胜感激

我在这里粘贴了正在使用的代码：

具体而言，此HTML部分：

<svg class = "leftBar">
    <rect id="leftRec">
        <div class="Name">Name</div>
        <div class = "icon">
            <img src ="img/education.png">
        </div>
    </rect>

    <rect id = "rightRec"></rect>

</svg>


名称

作为编辑，我最初希望在另一个矩形上方有一个矩形，如下所示：

我试图将A4大小的页面内的所有内容对齐，但蓝色矩形在A4页面最左侧之间有一个间隙。由于我不允许使用绝对值，我只想了解一下如何做到这一点，因为我在网上尝试的东西都不起作用。不是要求某人为我实现它，而是告诉我怎么做，因为这有点让人困惑。谢谢你的帮助

当前代码：

请记住，您不能将

div

作为子对象直接附加到

rect

、

circle

和

path

。您只需使用

foreignObject

即可，但我强烈建议不要这样做

但是如果您坚持这样做，您可以查看

foreignObject

文档

如果你想以另一种方式创建简历模板，我可以为你分享一些代码，以便更好地说明

编辑：

下面是一个可供选择的解决方案，请查看下面的代码片段：

.container{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
.container>div.right-rect{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
弯曲方向：立柱；
宽度：100%；
最大宽度：200px；
身高：100%；
背景色：#003d73；
}
.container>div.right-rect>span.name{
字体大小：粗体；
颜色：白色；
字体大小：35px；
}
.container>div.right-rect>span.name，
.container>div.right-rect>div.icon{
边缘顶部：20px；
}


名称