Question

我有一些图像，我用z-index放置了一个trach bin图像。这有效。但是当我将浏览器调整到较小的屏幕时，图片会相互滑动。但目的是保留原始格式，而不是彼此相邻，它们相互排列在左侧。

在我使用的代码下面。

<style type="text/css">
.test {
  position:absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  display: inline-block;
  min-width: 160px;
  min-height: 120px;
  width: 160 px;
  height: 120px;
}

.trashbin {
  position:absolute;
  top: 65px;
  left: 115px;
  z-index: 3;
}
</style>


<fieldset>
    <div class="form-group">

        <div class="col-xs-4">
          <img src="/img/l16001.jpg" class="test" >
          <a href="#"><img src="/img/trash.png" class="trashbin"></a>
        </div>

        <div class="col-xs-4 test2">
          <img src="/img/l16001.jpg" class="test" >
          <a href="#"><img src="/img/trash.png" class="trashbin"></a>
        </div>

        <div class="col-xs-4 test2">
          <img src="/img/l16001.jpg" class="test" >
          <a href="#"><img src="/img/trash.png" class="trashbin"></a>
        </div>

    </div>
</fieldset>

Answer 1

使用flexboxes进行布局。将在需要时包装。

.images {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.test2 {
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
}

.test2 img {
  margin-right: .5em;
}

<fieldset>
  <div class="form-group images">

    <div class="col-xs-4 test2">
      <img src="http://placehold.it/100">
      <a href="#"><img src="http://placehold.it/10" class="trashbin"></a>
    </div>

    <div class="col-xs-4 test2">
      <img src="http://placehold.it/100">
      <a href="#"><img src="http://placehold.it/10" class="trashbin"></a>
    </div>

    <div class="col-xs-4 test2">
      <img src="http://placehold.it/100">
      <a href="#"><img src="http://placehold.it/10" class="trashbin"></a>
    </div>

  </div>
</fieldset>

将图像排列在彼此之间的左侧

1 个答案: