将图像/按钮修复到div边缘？

我正试图做到在图像中显示什么，并且在尝试获取它们的时候非常困难。如果可能，尽可能保持响应的最佳方法是使用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; 
}

来源

2016-02-14 Groovietunes

你有任何代码，您已经开始？不是全部，只是相关的部分。 – magreenberg

我会添加它，但我并没有想象它有任何用处，因为我没有尝试过的东西甚至已经接近工作。 – Groovietunes

'.tool-div'必须有一个位置，例如'position：relative'。具有明确定位的第一个父元素将用作绝对位置为 – luxer

我认为最好的办法是使用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>

来源

2016-02-14 06:42:53 magreenberg

谢谢你，你的解决方案有点接近，然后我花了几个小时玩它。我意识到使用固定像素值是一种可行的解决方案，然后只需使用媒体查询对不同的屏幕尺寸进行调整即可。在我的大多数测试中，我试图避免使用固定的像素值，以便自动调整。你知道这个相同的效果是否可以使用百分比的宽度和高度的div，图像，按钮和列表？ – Groovietunes

@Groovietunes调查'calc（）'css属性。这可能有帮助。 – magreenberg

将图像/按钮修复到div边缘？

回答

相关问题