如何在inline-block盒子间或上方放置三角形 SharePoint门户CSS布局问题

解决方案 #

调整说明 #

• 统一间隙占位盒与三角形的宽度，保证上下层布局精准对齐
• 给三角形添加vertical-align: bottom属性，让它底部紧贴下方灰色步骤条的顶部
• 缩小三角形尺寸匹配布局比例，调整内部文字定位实现居中显示
• 给三角形所在行添加属性消除默认行间距和inline-block空白，避免上下模块出现多余空白，同时解决窄屏折行问题
• 修正了原有自定义文本标签未闭合的问题，避免渲染异常

可直接复用的修改后代码 #

替换你原有代码即可：

<html>
<head>
  <style>
    .oransjboks {
      text-align: center;
      padding: 0.3em;
      margin-bottom: 0.3em;
      background-color: #F8992E;
      height: 25px;
    }

    .nextto {
      display: inline-block;
      text-align: center;
      padding: 0.3em;
      background-color: #D0CEC4;
      height: 60px;
      width: 15.66%;
      vertical-align: top;
      box-sizing: border-box;
    }

    .nextto .bottom {
      text-align: left;
      min-width: 200px;
      top: 40px;
      left: 50%;
      transform: translate(-50%, 0);
      padding: 10px 20px;
      color: #FFFFFF;
      background-color: #767171;
      font-weight: normal;
      font-size: 14px;
      border-radius: 8px;
      position: relative;
      z-index: 99999999;
      box-sizing: border-box;
      display: none;
    }

    .nextto:hover .bottom {
      display: block;
    }

    .nextto .bottom i {
      position: absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -12px;
      width: 24px;
      height: 12px;
      overflow: hidden;
    }

    .nextto .bottom i::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      left: 50%;
      transform: translate(-50%, 50%) rotate(45deg);
      background-color: #767171;
    }

    .hvitBoks {
      display: inline-block;
      padding: 0;
      height: 60px;
      width: 100px;
      vertical-align: top;
    }

    .nextto:hover {
      color: #ffffff;
      background-color: #767171;
    }

    .triangle {
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 60px 50px 0 50px;
      border-color: #00a76d transparent transparent transparent;
      vertical-align: bottom;
      line-height: 0;
    }

    .triangle tekst, .triangle tekst2 {
      position: relative;
      color: #ffffff;
      top: -40px;
      left: -15px;
      display: inline-block;
      text-align: center;
      width: 30px;
    }

    .triangle-row {
      margin-bottom: -4px;
      font-size: 0;
    }
    .triangle-row * {
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div style="width:100%">
    <div class="oransjboks"><b>Step 1.1 Detail design</b></div>
  </div>
  <div style="width:100%" class="triangle-row">
    <div class="hvitBoks"> </div>
    <div class="hvitBoks"> </div>
    <div class="triangle">
      <tekst> QL1 </tekst>
    </div>
    <div class="hvitBoks"> </div>
    <div class="triangle">
      <tekst> QL2 </tekst>
    </div>
    <div class="hvitBoks"> </div>
    <div class="triangle">
      <tekst> QL3 </tekst>
    </div>
    <div class="hvitBoks"> </div>
    <div class="triangle">
      <tekst2> QL4H </tekst2>
    </div>
    <div class="hvitBoks"> </div>
    <div class="triangle">
      <tekst> QL4 </tekst>
    </div>
  </div>

  <div style="width:100%">
    <div class="nextto"><b>Step 1.1.0 <br> some text
        <div class="bottom">
          <h3>Engineering objectives</h3>
          text
          <i></i>
        </div>
    </b></div>

    <div class="nextto"><b>Step 1.1.1 <br> some text
        <div class="bottom">
          <h3>Engineering objectives</h3>
          more text
          <i></i>
        </div>
    </b></div>

    <div class="nextto"><b>Step 1.1.2 <br> text about this step
        <div class="bottom">
          <h3>Engineering objectives</h3>
          text
          <i></i>
        </div>
    </b></div>

    <div class="nextto"><b>Step 1.1.3 <br> and this
        <div class="bottom">
          <h3>Engineering objectives</h3>
          text
          <i></i>
        </div>
    </b></div>

    <div class="nextto"><b>Step 1.1.4H <br> interesting step
        <div class="bottom">
          <h3>Engineering objectives</h3>
          text
          <i></i>
        </div>
    </b></div>

    <div class="nextto"><b>Step 1.1.4 <br> wow almost done, good job
        <div class="bottom">
          <h3>Engineering objectives</h3>
        text
          <i></i>
        </div>
    </b></div>

  </div>

</body>
</html>

内容的提问来源于stack exchange，提问作者RamyPanda