时间戳

首页 > 解决方案 > 防止图像显示在文本之上

html - 防止图像显示在文本之上

问题描述

我最近开始学习网络开发。我正在创建一个从 mealdb api 获取数据并显示数据的站点。我大部分时间都在工作，但问题是当我检查网页并在移动设备上查看时，图像呈现在文本之上，即标题和成分。我该如何防止这种情况发生？

理想情况下，在移动设备上，我想在一个列中显示标题，然后是图像、成分和说明。

这是它在桌面上的外观：

1

在移动：

2

.Recipe {
  padding-top: 30px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
  vertical-align: text-top;
}

.left-content {
  width: 40%;
  float: left;
}

.list {
  list-style: none;
  padding-left: 0px;
  padding-bottom: 15px;
  font-size: 1.2rem;
}

.right-content {
  width: 40%;
  float: right;
}

.title {
  font-size: 3rem;
  justify-content: center;
  padding-bottom: 0px;
}

.instructions {
  font-size: 1.2rem;
}

.Recipe h1 {
  text-align: center;
  padding-left: 250px;
}

.image {
  float: right;
  height: 480px;
  width: 480px;
  margin: 20px
}
<div className="Recipe">
  <div className="left-content">
    <h2 className="title">{prop.food.meals[0].strMeal}</h2>
    <ul className="list">
      {prop.materials.map(function(ingredients){ return
      <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
      })}
    </ul>
    <p className="instructions">{prop.food.meals[0].strInstructions}</p>
  </div>
  <div className="right-content">
    <img src={prop.food.meals[0].strMealThumb} alt="" className="image" />
  </div>
</div>

标签： htmlreactjs

解决方案

这是一种 CSS 情况，对于这种特定情况，我强烈建议您了解一下grid：https ://css-tricks.com/snippets/css/complete-guide-grid/

现在，我知道你可能不想读那么多书或学习一些全新的东西来解决这个问题。所以现在我会给你一个快速的解决方案，它在性能方面还不错。

您可以使用react-device-detect

它有一些专门在桌面或移动设备上打印的组件。所以在你的情况下，你可以有这样的事情：

import {BrowserView, MobileView} from 'react-device-detect';

在你的渲染中：

<div className="Recipe">
    <div className="left-content">
        <h2 className="title">{prop.food.meals[0].strMeal}</h2>
        <MobileView>
          <img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
        </MobileView>
        <ul className="list">
            {prop.materials.map(function(ingredients){
                return <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
            })}
        </ul>
        <p className="instructions">{prop.food.meals[0].strInstructions}</p>
    </div>
    <BrowserView>
      <div className="right-content">
        <img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
      </div>
    </BrowserView>
</div>

这个想法是“两次”打印图像，一次用于移动设备，另一次用于桌面。但是，很明显，它们不会同时打印。并且网络上的图像仅被请求一次，因此您可以打印同一张图像数十次，但它只会在浏览器上加载一次，这就是为什么这种替代解决方案运作良好的原因。

如果您不想使用react-device-detect，您可以打印两次图像（在与示例相同的位置），并且在 CSS 上只需使用Media Querydisplay: none为不需要的移动设备和桌面设置 a 。如果您更喜欢 CSS，请告诉我，我可以进一步详细说明如何在 CSS 上做到这一点。但我不建议这样做，因为它效率较低，因为即使您将它们隐藏在 CSS 上，HTML 也会有相同图像的两个标签。

如果您有任何问题，请告诉我。我希望这会有所帮助。

推荐阅读