时间戳

首页 > 解决方案 > 需要帮助创建一个充满图像的响应式页脚

html - 需要帮助创建一个充满图像的响应式页脚

问题描述

我试图制作一个充满图像的页脚，但找不到一种方法让它在 PC 和媒体设备上看起来不错。

我希望青铜赞助商小猫能很好地向左移动，而支持者小猫向右移动，同时保持一个合理的页脚高度。

我尝试了网格系统，但无法让青铜赞助商小猫的照片保持在合理的尺寸，或者照片超出容器并且页脚变得比我的整个网页大。而且我以前从未使用过 flexbox。 

footer .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.bronze-container {
    max-width: 300px;
}
.sponsor-container {
}
.othersupporter {
  background: white;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.othersupporter > p {
  background: white;
  color: black;
  padding: 1%;
  margin: 1px;
  flex: 1 0 15%;
}
.row h4 {
    padding-left: 2rem;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<title>Title of the document</title>
</head>

<body>
<footer style='background-color:white; width:100%; height:250px'>
    <div class='container' style='max-width:1024px; height:250px'>
        <div class='bronze-container'>
            <div class='row text-center' >
                <h4 >Bronze Sponsor </h4>
            </div>
            <div class='row text-center'>
                <img src="https://i.imgur.com/ZA7mKts.png" class="card-img" alt="...">
            </div>
        </div>
        <br class="visible-m"/>
        <div class='sponsor-container'>
            <div class="row text-center" >
                <h4>Supporters</h4>
            </div>
            <div class="othersupporter">
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
                <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
            </div>
        </div>
    </div>
</footer>
</body>

</html>

标签： htmlcss

解决方案

您的flex-wrap声明footer .container导致它们垂直堆叠而不是并排放置。我关闭了max-widthon.bronze-container并将其替换为flex将基础设置为 200 像素的声明，我觉得在此处的预览中看起来很合理。您可能需要针对您的实施进行调整。

footer .container {
  display: flex;
  justify-content: space-between;
}

.bronze-container {
  flex: 0 0 200px;
}

.sponsor-container {}

.othersupporter {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.othersupporter > p {
  padding: 1%;
  margin: 0;
  flex: 1 0 15%;
}

.row h4 {
  padding-left: 2rem;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Title of the document</title>
</head>

<body>
  <footer>
    <div class='container'>
      <div class='bronze-container'>
        <div class='row text-center'>
          <h4>Bronze Sponsor </h4>
        </div>
        <div class='row text-center'>
          <img src="https://i.imgur.com/ZA7mKts.png" class="card-img" alt="...">
        </div>
      </div>
      <br class="visible-m" />
      <div class='sponsor-container'>
        <div class="row text-center">
          <h4>Supporters</h4>
        </div>
        <div class="othersupporter">
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
          <p><img src="https://i.imgur.com/ZA7mKts.png" class="card-img    " alt="..."></p>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

推荐阅读