Question

我有这段代码：

＆＃13;

.container {
  width: 100%;
  margin: 30px;
}
.container div {
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  background: blue;
  display: inline-block;
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

我希望这些div适合.container宽度。我想为他们设置动态width和height。

感谢您的帮助！

Answer 1

CSS在绘制元素之后处理旋转，因此我们不能只使用width: 25%钻石，我们必须更聪明。

使用某些几何：

宽度的公式为25% / sqrt(2)（约为17.677％）

边距的公式为(25% - (25% / sqrt(2))) / 2（约为3.661％）

这里不要使用display: inline-block，因为它会在元素之间增加一个约4px的微小差距;请改用float: left。

这是你的钻石！（使用this method将div s样式化为正方形）

.container { width: 100%; height: 180px; background: gray; } .container div { width: 17.677%; padding-bottom: 17.677%; margin: 3.661%; transform: rotate(45deg); background: blue; float: left; }

<div class="container"> <div></div> <div></div> <div></div> <div></div> </div>

我添加了背景颜色，以便您可以看到容器的大小。如果你也希望容器的高度适合钻石，我做了JSFiddle进行了一些小改动。

Answer 2

如果你想要一个简单的方法，你应该在这里使用一些百分比。也用浮子替换内联块。值得注意的是，如果您使用浮动，请确保清除父容器以避免和布局问题......

的CSS：

.container {
  width: 100%;
}
.container div {
  width: 25%;
  transform: rotate(-45deg);
  background: blue;
  float: left;
}
.container div:before {
  content: "";
  padding-top: 100%;
  display: block;
}

See Example

钻石div适合容器

2 个答案: