html - 在移动 View 中移动文本下方的图像

Question

我试图在移动 View 中将图片放在一段文本下方，但在当前状态下，它覆盖了文本 block 。

这是它在桌面上的样子:

[![在此处输入图片描述][1]][1]

这是它目前在移动设备上的样子(图片覆盖了文字):

[![在此处输入图片描述][2]][2]

我希望它看起来如何:

[![在此处输入图片描述][3]][3]

一般概念是获取文本和按钮之间的图像。我曾尝试“显示: block ”——我的想法是，如果它被归类为一个单独的元素，它只会自动在文本之后滑动，但没有成功。

如有任何帮助，我们将不胜感激。

<script src="https://static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">hsjQuery = window['jQuery']</script>
    <link href="https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn2.hubspot.net/hub/-1/hub_generated/template_assets/1495141902003/hubspot_default/shared/responsive/layout.min.css" rel="stylesheet">


<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1509367336144/custom/page/Inbound/inbound.min.css">
<link rel="stylesheet" href="https://content.littlefish.co.uk/hs-fs/hub/1907421/hub_generated/template_assets/1515754183680/Custom/page/Inbound/audit.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600,700|Source+Sans+Pro:400,600" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//fast.fonts.net/cssapi/f1a0f2ac-0b00-438c-950f-841026767235.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   




<div class="results-wrapper-container clearfix">
<div id="starmanLow" class="starmanText section-hidden" style="display: block;">
<h2>Unsatisfactory user centricity (0-40)</h2>
<p>Put simply, your Service Desk is not performing to an acceptable level, and as a result you’re putting your organisation’s performance at risk (while paying for the privilege). From the time it takes to resolve user issues, to overall business alignment and the skill levels on offer, your Service Desk is way below the standards you need to take your business to the next level.</p>
<p>We would strongly urge you to look at alternative partners who will be far more focused on delivering a personalised approach that puts your users first and foremost. Speak with Littlefish to discover how you benefit from a designated group of accredited technicians who truly understand your business and the needs of your users – and build on that knowledge with each contact. Littlefish resolves over 70% of issues at first point of contact and has a 95% customer satisfaction rating, which means your users remain productive and you get to focus on strategic operational decisions rather than being dragged in to deal with day-to-day firefighting.</p>
<div class="formLink">Stop wasting money and talk to Littlefish</div>
</div>
<div id="starmanMedium" class="starmanText section-hidden">
<h2>Satisfactory user centricity (41-80)</h2>
<p>Unfortunately, quite good isn’t good enough. Your Service Desk has some capabilities but you’re missing out on a full, user-centric service. And when margins are tight and the competition fierce, all your suppliers should be pulling you forward to greater operational efficiency. Is your Service Desk proactively introducing you to the latest systems, better tools, and suggesting more streamlined ways of working? Do you have a designated team, who know your users by name and understand what is important to them?</p>
<p>As your business grows and new challenges appear, you need a Service Desk that is flexible and professional enough to grow with you. Look for a Service Desk that can boast 95% customer satisfaction with over 70% of issues resolved at first contact. Don’t settle for second best: find a partner who will give you an optimal service time and time again.</p>,
<div class="formLink">Boost your business performance with Littlefish</div>
</div>
<div id="starmanHigh" class="starmanText section-hidden">
<h2>Excellent user centricity (81-100)</h2>
<p>Congratulations, we don’t often see many other Service Desks rated as excellent. That’s because Littlefish sets an extremely high bar when it comes to IT excellence. Our <a href="https://www.littlefish.co.uk/careers" target="_blank">Littlefish Academy</a> is a structured training and development program that ensures all our staff have the latest skills to offer a world-class service. Our first line is a second line capability engineer, which is why we deliver 95% customer satisfaction and resolve over 70% of issues at first point of contact.</p>
<p>While your current provider is delivering what they promised, what about delivering <em>more</em> than promised? Littlefish go above and beyond expectations with a ‘shift left’ philosophy – growing knowledge about your users and finding ways to optimise their experience. It’s a personal approach from a designated team that solves issues your users didn’t even know were there.</p>
<p>In a fast-evolving industry, it pays to look at your options. Chat to us for an honest comparison with your current provider’s talent.</p>
<div class="formLink">Learn the true meaning of talent with Littlefish</div>
</div>
<div class="starmanImage"><img src="http://admin.contento.mobi/starman/stargraph?handle=littlefish&amp;scores=5.00,5.00,5.00,5.00,4.00,2.00,2.00,2.00,5.00,5.00&amp;desired=9.00,10.00,7.00,9.00,10.00,9.00,9.00,10.00,10.00,10.00"></div>
</div>

Answer 1

您的 starmanImage div 在 Mobile 中保持为 position: absolute。
你的 starmanImage img 有一个 transform: translateY(-50%)。

删除移动设备的问题后，问题就解决了。

//inside @media for Mobile Devices
.starmanImage{
    position: relative;
}
.starmanImage img{
    transform: none;
}