时间戳

首页 > 解决方案 > 当我更改页脚宽度时，文本一直向右移动

html - 当我更改页脚宽度时，文本一直向右移动

问题描述

我做了这个面包网站，在页脚。更改页脚时，我发现文本随着页脚不断向右移动。我如何将文本保留在图像旁边？

footer {
  clear: both;
  background-color: brown;
  color: white;
  padding: 5px 20px;
  width: 700px;
  max-width: 100%;
}
<main>
  <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="400" height="300" align="left">

  <p>Lorem ipsum...</p>
  <img src="https://imgix.bustle.com/mic/kwojkqt6twmbxd7d525gm9bzrcfnccm940okdfbtbxc3c3lnchh2v6bh907bdigs.jpg?w=1200&h=630&fit=crop&crop=faces&fm=jpg" alt="10 kinds of bread" width="400" height="300" align="right">
  <p>Lorem ipsum...</p>

  <footer>
    <p>&copy; 2021 Private Bread | The best online bread store!</p>
  </footer>
</main>

在此处输入图像描述

标签： htmlcss

解决方案

我想你可能希望你<footer>在你之外<main>：

footer {
  clear: both;
  background-color: brown;
  color: white;
  padding: 5px 20px;
  width: 700px;
  max-width: 100%;
}
<main>
  <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="400" height="300" align="left">

  <p>Lorem ipsum...</p>
  <img src="https://imgix.bustle.com/mic/kwojkqt6twmbxd7d525gm9bzrcfnccm940okdfbtbxc3c3lnchh2v6bh907bdigs.jpg?w=1200&h=630&fit=crop&crop=faces&fm=jpg" alt="10 kinds of bread" width="400" height="300" align="right">
  <p>Lorem ipsum...</p>
</main>
<footer>
  <p>&copy; 2021 Private Bread | The best online bread store!</p>
</footer>

推荐阅读