Question

现在我的安排如下：

我希望那些树能够适合正方形的上角（每个树在对角顶点，就像形成一个外部正方形）

我的HTML：

  <div class="outer-wrapper">

    <div class="inner-wrapper">
      <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)">
      </div>
    </div>

    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="boxClick(image.id)">
      <img src="{{image.path}}">
    </div>

  </div>

我的CSS：

.image img{

    height: 50px;
    width: 100px;
    margin-top: 45px;
    float: right;   
}

.inner-wrapper {  
  width: 200px;
}

.outer-wrapper {
    width: 250px;
}

.box {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
    float: left;    
}

我怎样才能做到这一点？如果我没有以正确的方式使用div，或者如果它们能够以更有效的方式用于实现同样的事情，那就太棒了。

Answer 1

您可以给出相对位置的框。并将包含图像的div放在其中并给它们绝对位置。然后您可以相对于框定位图像。

如果你想在每个角落都有一个图像，你应该为每个角添加一个div。然后你可以使用nth-child()对每个角应用不同的css规则。

如果要旋转图像，请使用transform:rotate();

这样的事情会对你有用：

<强> HTML

    <div class="inner-wrapper">
          <div class="box " >
           <div class="image" >
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           <img src="your_image.jpg">
           </div>
         </div>
        </div>

<强> CSS

.box{
  position:relative;
}   

.image{
position:absolute;
}

.image:nth-child(1) {
  top:-15px;
  left:-5px;
  transform: rotate(45deg);
}

.box .image:nth-child(2) {
  top:-15px;
  right:-5px;
  transform: rotate(-45deg);
}

.box .image:nth-child(3) {
  bottom:-15px;
  left:-5px;
  transform: rotate(135deg);
}

.box .image:nth-child(4){
  bottom:-15px;
  right:-5px;
  transform: rotate(-135deg);
}

这是一个工作小提琴：

https://jsfiddle.net/e06mjvpf/7/

CSS用于旋转和定位另一个元素的角落中的元素

1 个答案: