需要关于如何根据设计制作html结构的建议或解决方案吗？

碰巧一个新手设计师决定用很多菱形的想法来制作这个网站。下面是下一个设计理念：

---

有没有关于如何构建它的想法？

我认为构建它的最简单方法是一个列表，如果仅仅是因为它在语义上似乎合适，并且因为图像和描述应该放在一起。 大概是这样的：

<ul>
    <li class="staff__list--left">
        <name>
        <role>
        <description>
        <image>
    </li>
    <li class="staff__list--right">
        <name>
        <role>
        <description>
        <image>
    </li>
</ul>

浮动li的位置为：相对，宽度为calc（50%-[图像大小]），图像位置为：绝对，因此可以将其移向中心。

---

我倾向于尽量减少DOM，但如果有帮助的话，您可能希望在自己的div中对名称、角色和描述进行分组。

因此，以下是我根据建议制定的解决方案：

html，正文{
背景：#fff！重要；
}
.包装纸{
最大宽度：690px；
保证金：50px自动；
溢出：隐藏；
填充底部：60px；
}
.李.姓名{
颜色：#e70f73；
字号：18px；
线高：14px；
}
.李.角色{
颜色：#fab233；
字体大小：14px；
线高：28px；
}
.专家{
显示：块；
宽度：200px；
明确：两者皆有；
位置：相对位置；
列表样式：无；
保证金：0；
填充：0；
}
.专家：不是（：第一个孩子）{
利润上限：-15px；
}
.专家：之后{
内容：“；
显示：表格；
}
.左{
浮动：左
}
.对{
浮球：对
}
.专家.形象{
位置：绝对位置；
排名：0
}
.左.图像{
右图：-100%；
}
.专家.对.形象{
左-100%；
}

森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特



森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特



森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特



森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特



森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特



森林Gamp
С角色，艺术家
Lorem ipsum door sit amet，奉献精英。在最大的准尼希尔的地方。多伦·伊普苏姆·多洛·西特

这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的细节。请回顾有关堆栈溢出的问题，以及什么类型的问题和什么类型的@Paulie_D，如果您能帮助我提出一个看起来正确的问题，请帮助我。我不知道如何根据主题提出一个更漂亮的问题。我建议你参考我上面的评论。所以不是一般的指导，而是具体的、可解决的编程问题。。。我想避免绝对的。但谢谢你们的想法。我听到了，但我不确定你们能不能在没有绝对定位的情况下拥有如此接近彼此的形状。您可以在一个div中对名称、角色和描述进行分组，然后在li上使用display:table以避免图像单独出现，但是您需要在li上给出position:absolute以使图像如此接近。对我来说，将图像设置为绝对值似乎可以为响应提供更大的灵活性。我想你可以找到不使用绝对值，甚至不使用列表的方法，但我担心这会导致代码过于像素完美，难以维护。CSS网格在这方面可能会有所帮助（它比flexbox的优势在于它允许一些3D布局z索引），但它还没有得到足够的支持。我希望你能找到一个好的解决办法：）越来越近我想现在主要是在这里和那里调整像素的问题。当你做出反应时，你可以用百分比来减少痛苦。不过我只列出一个清单，不多。请注意，在模型中，右侧卡片中的文本也右对齐。哦，还有。专家：CSS中的not（：first child）可以转换为更简单的.experties+.experties，这样就不会在较旧的浏览器中中断。