Question

我无法弄清楚为什么我的图片表不会留在我页面的内容部分内。还想知道为什么我的页脚不会停留在页面底部。我的页面需要看起来像这样的图像：

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

＆＃13;

<div class="mainwrapper">
  <div class="pagebanner">
    <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
  </div>
  <!--PageBanner-->

  <div class="main">
    <div class="navbar">
      <ul>
        <li>
          <a href="#">Information</a>
        </li>
        <li>
          <a href="#">Home</a>
        </li>
      </ul>
    </div>
    <!--Navbar-->

    <div class="headers">
      <div class="header">
        <h1>The Club Site</h1>
      </div>
      <!--Main page heading section-->

      <div class="subheading">
        <h2>Members Prices</h2>
      </div>
      <!--Sub heading section-->
    </div>

  </div>
  <div class="content">
    <div class="table">
      <table>
        <th>Discount Prices</th>
        <tr>
          <td><img src="https://imgur.com/S1JVX6K" </td>
            <td><img src="https://imgur.com/uzkB81W" </td>
              <td><img src="https://imgur.com/YvnOW4s" </td></tr>
        <tr>
          <td><img src="https://imgur.com/f2wnDXT" </td>
            <td><img src="https://imgur.com/XiBYnS2" </td>
              <td><img src="https://imgur.com/mGcCorr" </td></tr>
      </table>
    </div>
    <!--Table Section-->

  </div>
  <!--Content section-->

  <div class="footer">
    <footer>wsrgferg</footer>
  </div>
  <!--Footer section-->
</div>
<!--Endwrapper-->

＆＃13;

Answer 1

在表格标记中添加margin:0 auto并将更改为 h3 ，并使 h3 {{ 1}}

text-align:center

Answer 2

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

.content {
  min-height: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bazaar Ceramics</title>
</head>

<body>

  <div class="mainwrapper">
    <div class="pagebanner">
      <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
    </div>
    <!--PageBanner-->

    <div class="main">
      <div class="navbar">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
        </ul>
      </div>
      <!--Navbar-->

      <div class="headers">
        <div class="header">
          <h1>The Club Site</h1>
        </div>
        <!--Main page heading section-->

        <div class="subheading">
          <h2>Members Prices</h2>
        </div>
        <!--Sub heading section-->
      </div>

    </div>
    <div class="content">
      <div class="table">
        <table style="margin:0 auto;">
          <h3 style="text-align:center;">Discount Prices</h3>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
        </table>
      </div>
      <!--Table Section-->

    </div>
    <!--Content section-->

    <div class="footer">
      <footer>This is the Footer</footer>
    </div>
    <!--Footer section-->
  </div>
  <!--Endwrapper-->

</body>



</html>

如果您添加到.content min-height的绝对高度（如像素），那么您的内容将始终使用此地点，而您的页脚将位于您提供内容的修复高度之下。

问题是您的内容仅使用了大约20％的屏幕，而在这20％的情况下，您的页脚将附加到此页面。如果您向页面添加更多内容，则会按下页脚，因为您的页面可能需要80％的屏幕高度。

这不是最好的解决方案，因为它不是真正的响应，但它的工作原理。欢迎更好的消息。

为什么我的桌子不在中心？

2 个答案: