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

Question

我收到了来自客户的不寻常的请求，即将他们提供的课程定位在朝下的三角形中。下图：

 X X X X
  X X X
   X X 
    X

其中X是其中一个方框。我已经用一些行类和偏移（下面）完成了这个，但我现在认为可能有一种更简单的方法来做到这一点，因为它不完全是一个可访问的布局（所有的像素）值和偏移是硬编码的）。我正在寻找一些关于如何响应地定位盒子或者更容易实现我在下面所做的事情的洞察力。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不需要偏移类。

在行上设置text-align: center，在项目上设置display: inline-block，您就可以了。 （有关居中的更多信息 - 请参阅this article）

Updated Codepen

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Updated Codepen (flexbox)