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

Question

新手设计师决定用很多菱形创意制作网站。所以这是下一个设计理念：

如何构建它的任何想法？

Answer 1

我认为构建它的最简单方法是列表，只是因为它似乎在语义上合适，并且因为图像和描述应该保持在一起。 粗略地，这样的事情：

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

浮动li的位置为：relative，宽度如calc（50％ - [图像大小]），图像位置：绝对，因此您可以将其移向中心。 我倾向于尽可能地保持DOM的最小化，但是如果它对你有帮助，你可能想要在自己的div中对名称，角色和描述进行分组。

Answer 2

所以这是我根据建议做出的解决方案：

＆＃13;

＆＃13;

html, body  {
  background: #fff !important;
}
.wrapper {
  max-width: 690px;
  margin: 50px auto;
  overflow: hidden;
  padding-bottom: 60px;
}
.specialists li.name {
 color: #e70f73;
  font-size: 18px;
  line-height: 14px;
}
.specialists li.role {
  color: #fab233;
  font-size: 14px;
  line-height: 28px;
}
.specialists {
  display: block;
  width: 200px;
  clear: both;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.specialists:not(:first-child) {
  margin-top: -15px;
}
.specialists:after {
  content: "";
  display: table;  
}

.specialists.left {
  float: left
}
.specialists.right {
  float: right
}
.specialists .image {
  position: absolute;
  top: 0
}
.specialists.left .image {
  right: -100%;
}
.specialists.right .image {
  left: -100%;
}

＆＃13;

<div class="wrapper">
  
<ul class="specialists left">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>

<ul class="specialists right">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>
  
<ul class="specialists left">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>
  
<ul class="specialists right">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>
  
<ul class="specialists left">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>

<ul class="specialists right">
  <li class="name">Forest Gamp</li>
  <li class="role">Сharacter, artist</li>
  <li class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque et recusandae placeat maxime quasi nihil. Dorem ipsum dolor sit amet.</li>
  <li class="image"><img src="http://eyes.in.ua/wp-content/uploads/2014/07/face.png" alt="" /></li>
</ul>
  
</div>

＆＃13;

＆＃13;

＆＃13;