Question

在我的生命中找不到任何相关内容。我只是想在同一行上多次显示1个小图标，但是想要将每个实例旋转一点，然后再调整最后一个实例。因此，在行的末尾，与第一个图标相比，最后一个图标被完全翻转。

这是我的尝试:(谢谢）

<div class="container">
    <p class="one">I don't</p><p class="two">really want </p><p class="three">any</p><p class="four">words here</p>
</div>

<style>
p.one {
  float:left;
  image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
}
p.two {
  float:right;
  background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
  transform: rotate(60deg);
}
p.three {
  float:right;
  background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
  transform: rotate(120deg);
}
p.four {
  float:right;
  background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
  transform: rotate(180deg);
}
</style>

Answer 1

连续定位系统可以通过2种方式实现。第一个也是简单的方法是自举网格系统，所以你的问题可以解决这个问题

<div class="container-fluid">
    <div class="col-sm-3">img</div>
    <div class="col-sm-3">img</div>
    <div class="col-sm-3">img</div>
    <div class="col-sm-3">img</div>
</div>

将我用你的图片写的img关键字替换为你在css中你想要的转换，你将会全部设置。

将图像放在div中的行中的第二种更高级的方法是位置css属性。

position:relative;
top:40px;
left:70px;

这会将元素放在相对于其父元素的特定位置，因此您可以将它们放在任何您想要的位置。

肯定有更多方法可以像flexbox等那样做，但我完全建议使用bootstrap网格系统，因为它易于使用，而且最重要的是响应！

Answer 2

我认为你应该将文字与旋转分开。像这样的东西

<div class="container">
    <p><span class="one"></span>I don't</p>
    <p><span class="two"></span>really want </p>
    <p><span class="three"></span>any</p>
    <p><span class="four"></span>words here</p>
</div>

并在css中使用图像作为背景图像

.container {width:100%}
.container p { float:left; margin:0 20px}
.container p span {
     width:20px; height:20px; display:block;
     background: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png") no-repeat left center; float:left;
}
.two { transform: rotate(60deg); }
.three { transform: rotate(120deg); }
.four { transform: rotate(180deg); }

这是工作sample

div中的多个图像

2 个答案: