Question

我无法通过HTML练习来完成作业。基本上，我必须将多个图像放置在屏幕/身体的不同位置，但是问题出在图像右侧放置了一行“ hr”元素。这是我的进度和锻炼的照片。如果有人可以帮助我，我会很高兴。祝你有美好的一天！

[1] https://imgur.com/6SWWGx1“锻炼”
[2] https://imgur.com/0qL3V32“我的进度”

<!DOCTYPE html>
<html>
<head>
    <title>ES 8</title>
</head>
<body>
    <img src="erba.jpg" width="10%">
    <hr>
    <img src="erba.jpg" width="30%">
    <img src="erba.jpg" width="10%" align="top">
    <div><hr align="left" width="20%"></div>


</body>
</html>

Answer 1

这是因为默认情况下，包括<hr/>和<div/>在内的大多数元素都是全角框-或彼此堆叠的块。阅读有关box-model of CSS elements here的更多信息。

将其从<div/>中取出并将<hr/>的CSS更改为display: inline-block会将其添加到侧面，因为它将设置为图像的“内联”。请记住，这只有在实际有空间的情况下才有效-因此元素的宽度，边框和边距之和小于等于100％。

您也可以使用透明的</div>来实现相同的效果，在透明的<hr/>中，只需将其边框之一设置为可见即可，而不使用binder.forField(textFieldForNumber) .withValidator(new RegexpValidator("Only 1-9 allowed","\\d*")) .bind(YourEntity::getNo, YourEntity::setNo);。

但是，在展望本练习的其余部分时，您可能还想看一下一些通用的布局元素，例如flexbox和grid。一旦掌握了这些知识，它们就可以使页面中的内容定位变得非常容易。

Answer 2

您想要这样的东西吗？

.upper img{
  width:15%
}

.lower{
  display:flex;
  border-top:1px solid black;
  padding-top: 1rem;
  margin-top:1rem
}

section{
  flex-basis:calc(100% / 3);
}

section img{
  width:100%
}

section:nth-child(2) div:first-child img{
  width:25%
}

section:nth-child(2){
    margin:0 1rem;
}

section:nth-child(2) div:nth-child(2){
  display:flex;
  justify-content:flex-end;
  border-top:1px solid black;
  padding-top:1rem
}

section:nth-child(2) div:nth-child(2) img{
  width:80%;
  border: 2rem solid black
}

<div class="upper">
<img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
</div>
<div class="lower">
  <section>
    <img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
  </section>
  <section>
    <div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
    <div><img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/></div>
  </section>
  <section>
    <img src="https://pics.freeartbackgrounds.com/fullhd/Green_Grass_Background_Texture-682.jpg"/>
  </section>
</div>

如何在图像的右侧放置<hr>？

2 个答案: