css - 如何根据CSS中的屏幕分辨率移动图标

Question

我在解决 CSS 设计中的这个问题时遇到了问题。首先，我有一个位于文本旁边的图标。如下图。

但是现在，当我尝试最小化屏幕时，smurfs 图标会与下面的文本发生冲突。

现在我的问题是，当我降低浏览器屏幕分辨率时，如何让图标远离文本以免与其发生冲突？

这是我的 CSS 代码。

.footer .icon-footer {
  overflow: hidden;
  position: absolute;
  background-size: contain;
  width: 100%;
  left: 18%;
  top: 25px;
}

.icon-footer .icon {
  float: left;
  width: 51px;
  height: 51px;
  position: relative;
  background-size: 35px;
  background-repeat: no-repeat;
  background-image: url("images/icon.png");
  margin-left: 4px;
  padding-left: 20px;
}

不过，我们将不胜感激。

更新。 这是我的 index.html 代码的一部分。

 <div class="icon-footer">
          <div class="icon"></div>
		  </div>
          <div class="info">
                <p>&copy; 2017 McDonald&#039;s<sup>&reg;</sup></p>
                <p>Smurfs™ & © Peyo 2017 Lic. Lafig Belgium. Smurfs: The Lost Village, the Movie</p>
                 <p>© 2017 Columbia Pictures Industries, Inc. and LSC Film Corporation. All Rights Reserved.</p>
                </div>

完整的 index.html 代码可以在这里找到 https://jsfiddle.net/arg0L09m/1/ CSS 可以在这里找到。 https://jsfiddle.net/2q1catmt/

Answer 1

一种可靠的方法是将 Logo 和文本内容包裹在一个容器中，而不使用任何类型的绝对定位，或者仅在容器上使用绝对定位。

下面这只是一个基本的例子；需要进行一些调整；点击“运行片段”，然后点击“整页”，以便更好地测试它在不同页面宽度上的表现。

.footer .icon-footer {
  overflow: hidden;
  position: absolute;
  background-size: contain;
  width: 100%;
  left: 18%;
  top: 25px;
}

.icon-footer .icon {
  float: left;
  width: 51px;
  height: 51px;
  position: relative;
  background-size: 35px;
  background-repeat: no-repeat;
  background-image: url("http://findicons.com/files/icons/638/magic_people/96/magic_ball.png");
  margin-left: 4px;
  padding-left: 20px;
}

<div class="footer">

  <div class="icon-footer">
    <div class="icon"></div>
    <div class="content">
      Bacon ipsum dolor amet fatback pork shoulder ball tip, jerky boudin t-bone biltong pastrami frankfurter meatball hamburger. Cow kielbasa fatback short loin tail. Ham hock shankle biltong salami, hamburger turducken sirloin. Flank ball tip leberkas drumstick pancetta meatloaf burgdoggen rump short loin kevin picanha ham hock venison hamburger tri-tip. Fatback jerky shoulder pork t-bone boudin bresaola tail hamburger meatloaf capicola.
    </div>
  </div>
  
</div>