将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并在项目上显示：inline-block,你很高兴. (有关居中的更多信息 – 请参阅this article)

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

Updated Codepen (flexbox)

原文链接：https://www.f2er.com/html/225539.html

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

解决方法

猜你在找的HTML相关文章