在向下的三角形中定位HTML框

我收到了客户的一个不寻常的请求，那就是将他们提供的课程放在面向下的三角形中。 图表如下：

 X X X X
  X X X
   X X 
    X

其中X是其中一个框。 我已经做了一些行类和偏移（下面），但我现在认为可能有一个更简单的方法来做到这一点，因为它不是一个完全可访问的布局（所有的像素值和偏移都是硬编码）。 我正在寻找一些有关您如何定位盒子或更简单的方法来实现我在下面所做的工作的一些见解。

.item {
  text-align: center;
  width: 260px;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

.item button {
  float: right;
}

.row {
  width: 100%;
  clear: both;
}

.offset {
  position: relative;
}

.offset-1 {
  left: 130px;
}

.offset-2 {
  left: 260px;
}

.offset-3 {
  left: 390px;
}

<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-1">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-2">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row offset offset-3">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>

---

偏移类不是必需的。

设置text-align: center ，并在项目上display: inline-block ，您可以轻松前往。 （关于集中的更多信息 - 请参阅这篇文章）

更新了Codepen

---

如果您需要这种响应，您可以使用flexbox

.row {
  width: 100%;
  height: 23vw;
  text-align: center;
  display: flex;
  justify-content: center;
}
.item {
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20vw;
  height: 16vw;
}
img {
  width 100%;
  height: 100%;
}
.item button {
  display: block;
  margin-top: 10px;
}

<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>

链接地址: http://www.djcxy.com/p/92569.html

上一篇: Positioning HTML Boxes In a Downwards Facing Triangle

下一篇: How to get Textinputlayout hint android in multiple lines?