Question

我试图编写一个简历模板，只是为了学习有关HTML和CSS的基础知识。但是，在将矩形放置在另一个矩形中时，我遇到了一个问题。我一直在寻找小时，以及如何解决此问题，但不确定为什么根本不出现。我希望矩形显示在蓝色的上方，但在“名称”文本下方，像高亮条一样。

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

作为快速跟进，我想知道为什么我无法在矩形的中心对齐文本“名称”。我试着做text-align：center，但是那也不做任何事。我觉得我在这两个问题上都缺少一个主要概念。任何见识将不胜感激。

我在这里粘贴了正在使用的代码：https://jsfiddle.net/Lx09fvcw/1/

具体来说，这是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>

作为编辑，我最初希望在另一个矩形上方放置一个矩形，例如：https://imgur.com/a/eOUGT8n

我正在尝试对齐A4尺寸页面内的所有内容，但是蓝色矩形在A4页面的最左侧部分之间有一个间隙。由于不允许使用绝对值，因此我只想对如何做到这一点有所了解，因为我在网上尝试不起作用。不要求别人为我实现它，而是给我展示方法，因为它有点令人困惑。感谢您的帮助

当前代码：http://jsfiddle.net/05p9qo7t/1/

Answer 1

请记住，您不能将div作为孩子直接附加到rect，circle和path。您只能使用foreignObject来做到这一点，但我强烈不建议这样做。

但是，如果您坚持要这样做，可以查看foreignObject文档here。

如果您想以其他方式创建简历模板，我可以为您共享一些代码以供更好地说明。

编辑：

这里是您想要的替代解决方案，请查看下面的代码片段：

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.container>div.right-rect {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  max-width: 200px;
  height: 100%;
  background-color: #003d73;
}

.container>div.right-rect>span.name {
  font-weight: bold;
  color: white;
  font-size: 35px;
}

.container>div.right-rect>span.name,
.container>div.right-rect>div.icon {
  margin-top: 20px;
}

<div class="container">
  <div class="right-rect">
    <span class="name">Name</span>
    <div class="icon">
      <img src="img/education.png">
    </div>
  </div>
  <div class="left-rect"></div>
</div>

注意：：我只是使用100vh和100vw来适合每个视口，您可以将它们替换为任何合适的值。

不包含position: absolute;的左矩形

为避免使用position: absolute;，首先，应将所有元素包装在相关的父级中，因此需要移动

<div class="over-rect"></div>

和

<span class="name">Name</span>

到相关的父级，在我们的例子中是div类的blue-rect，然后由于我们使用了伪类样式，因此我们应该修改一些样式以使项目适合在流。之后，我们应该摆脱position: absolute;，并用relative取代它们。

这是可选的，对于响应式设计来说更好，以防万一您不关心这些东西，您可以跟上绝对定位。

但是我们还必须在流程中进行一些修改，即修改相对位置的项目的top元素，因此我们向样式中添加了top元素以相对于其父项位置移动相对项目

查看以下代码修订：

body {
  background: rgb(204, 204, 204);
}

.container {
  width: 200px;
  height: 29.7cm;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.container>div.blue-rect {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 200px;
  max-width: 200px;
  height: 100%;
  background-color: #003d73;
}

.container>div.blue-rect>div.over-rect {
  position: relative;
  top: 20px;
  width: 100%;
  max-width: 200px;
  height: 3%;
  background-color: red;
}

.container>div.blue-rect>span.name {
  position: relative;
  top: -18px;
  z-index: 20;
  font-weight: bold;
  color: white;
  font-size: 35px;
}

.container>div.blue-rect>div.icon {
  margin-top: 10px;
}

.education {
  width: 60px;
  height: auto;
}

page[size="A4"] {
  position: relative;
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

@media print {
  body,
  page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">
  <div class="container">
    <div class="blue-rect">
      <div class="over-rect"></div>
      <span class="name">Name</span>
      <div class="icon">
        <img class="education" src="img/education.png">
      </div>
    </div>
  </div>
</page>

在另一个矩形内放置一个矩形并放置元素

1 个答案: