将图像/按钮固定到div的边缘？

Question

我正在尝试实现图像中显示的内容并且在尝试获取图像时非常困难。使用HTML / CSS实现这一目标的最佳方法是什么，同时尽可能保持响应？

<div class="tool-div">
   <img src="{{ obj.image.url }}">
   <div>
      <li>It Does this and that and that</li>
      <li>It Does this and that and that and that</li>
      <li>It Does this and that and that and that</li>
      <li>It Does this and that and that and that</li>
   </div>
   <button class="btn btn-primary center-block">{{ obj.title }}</button>
</div>



.tool-div {
    max-width: 50%;
    margin: 20px;
    height: 100px;
}


.tool-div img {
    border-radius: 50%;
    height: 100%;
    position: absolute;
    left: 20;
}

Answer 1

我认为最好的方法是使用absolute / relative定位来移动元素。 以下是

的示例

div{
  width: 50%;
  height: 200px;
  border: 2px solid #333
  box-sizing: border-box;
  margin: 0 auto;
  background: green;
  position: relative; /*set position relative*/
}
div span.circle{
  height: 100%;
  display:block;
  width: 200px;
  border-radius: 50%;
  background: red;
  left: -100px; top: 0; /*move left half the width of the element*/
  position: absolute; /*set position absolute*/
}
div span.square {
  height: 75px;
  width: 150px;
  background: blue;
  position:absolute;
  /* quick vertical align */
  top: 50%;
  transform: translateY(-50%);
  right: -75px;
}
div ul{
  width: 100px;
  margin: auto;
  display:block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div>
<span class="circle"></span>
<ul>
  <li>stuff</li>
  <li>stuff</li>
</ul>
<span class="square"></span>
</div>