將圖像/按鈕修復到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邊緣？

回答

相關問題