在移动视图中将图像移动到文本下方

Question

我想在移动视图中将图像放在一段文本下面，但是，在它的当前状态下，它会覆盖文本块。

这是它在桌面上的显示方式：

这就是它目前在移动设备上的显示方式（图片覆盖文字）：

我希望它看起来如何：

它在文本和按钮之间获取图像的一般概念。我试图'显示：阻止' - 我的想法是，如果它被归类为一个单独的元素，它将自动在文本后滑动，但没有成功。

任何帮助都将不胜感激。

<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仍为position: absolute 而您的starmanImage img有一个transform: translateY(-50%)。

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

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

Answer 2

正如@CBroe所说，这是因为你的图像div容器具有绝对定位。只需要在特定屏幕尺寸时禁用它

＆＃13;

＆＃13;

@media (max-width: 768px){
  .starmanImage img{
    transform: none !important;
  }
  .starmanCurve, .starmanImage {
    position: relative !important;
    /* This is just some top padding */
    padding-top: 30px;
  }
}

＆＃13;

<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="https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>
</div>

＆＃13;

＆＃13;

＆＃13;