Question

是否可以使这2个圆圈始终位于图像底部的左右两侧？当我调整图像大小时，它们必须始终在图像的左下方，第二个在图像的右下方。（它们应该始终贴在图片的底角上）如何这样放置它们？

enter code here

Codepen： https://codepen.io/anami90/pen/KeEqRw?editors=1100

Answer 1

根据您的问题，圆圈应该出现在外栏上，不是吗？希望这会有所帮助：

div {
  height: 100vh;
}
.col-3 {
  background: lightgreen;
}
.col-6 {
  background: pink;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.circle-left {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  left: 0;
  bottom: 0;
}
.circle-right {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
}
img { 
  width: 100%;
  height: auto;
  vertical-align: middle;
}
<div class="row">
  <div class="col-3">col-3</div>
  <div class="circle-left"></div>
  <div class="col-6">

    <img src="https://www.w3schools.com/w3css/img_lights.jpg"/>

  </div>
  <div class="col-3">col-3</div>
  <div class="circle-right"></div>
</div>

https://codepen.io/anon/pen/zabLoq?editors=1100

Answer 2

我想将这2个圆定位在下面的图片上： enter image description here

响应图像底部的图标（始终在引导栏的底部）

2 个答案: