Question

我的其中一个页面上的内容没有扩展整个页面的整个距离，这是一个问题。我将所有内容放置在容器中，并将容器的max = width设置为1500px。但它仍然不允许内容超出页面的距离。

这是我的页面代码：

<body>
    <div id="wrapper">
    <div id="banner-wrapper">
    <!---Company Header-->
        <header>
      <div id="header">
                <h1 class="main_header">Bracelets</h1>
                <audio autoplay="autoplay" loop="loop" id="background-music">
                    <source src="music/Albinoni-adagio-in-g-minor-acoustic-guitar.mp3" type="audio/mpeg">
                    <source src="music/Albinoni-adagio-in-g-minor-acoustic-guitar.wav" type="audio/wav">
                </audio>
        </div>
        </header>
<!---end of Company Header-->
        <br>
    <?php include_once("templates/template_navigation.php"); ?>
        <br>
        <br>
        <br>
<!--Start Comment page Body Content-->
<div id="body-content">
    <div class="bracelet_body">
        <?php
                for ($i=0; $i <sizeof($item_number) ; $i++) {
        ?>
        <table width="100%" border="2" cellspacing="0" cellpadding="15">
  <tr>
    <td width="25%" valign="top">
        <img src="pictures/inventory/<?php echo $item_number[$i]; ?>.jpg" width="180" height="188" alt="<?php echo $item_number[$i]; ?>" /><br />
        <a href="pictures/inventory/<?php echo $item_number[$i]; ?>.jpg">View Full Size Image</a></td>
    <td width="75%" valign="top">
        <h3 class="Item"><?php echo $item_number[$i]; ?></h3>
      <p>Price: <?php echo "$".$price[$i]; ?><br />
        <br />
        Description: <?php echo $desc[$i]; ?>
<br />
         Category: <?php echo $category[$i]; ?>
        </p>
      <form  id="form1" name="form1" method="post" action="cart.php">
        <input type="hidden" name="pid" id="pid" value="<?php echo $item_number[$i]; ?>" />
        <input class="button" type="submit" name="button" id="button" value="Add to Shopping Cart" />
      </form>
      </td>
    </tr>

</table>
<?php
       }
 ?>
    </div>
</div>
<!--end of Comment body-->
<footer>
        <div class="icon-text">
            <div class="icon-text-text">
                <ul class="footer-nav">
                    <li><a href="tearms.php">Tearms and Conditions</a></li>
                    <li><a href="shipping_info.php">Shipping Information</a></li>
                </ul>
            </div>
        </div>
        <div class="icon-text-icon">
            <p class="email_text">Follow Me On</p>
            <div class="social-icon">
                <a href="#">
                <img class="social-icon" src="icons/facebook.png" alt="Facebook" height="45" width="45"></a>
            </div>
        </div>
</footer>
<footer class="second">
        <p>&copy; All Rights Reserved</p>
</footer>
</body>

正如我所说，我将包装器的css设置为1500像素的最大宽度和最小宽度，因此我不知道为什么它没有一直正确地显示在右边。有什么想法吗？

#wrapper  {
    max-width: 1500px;
    min-width: 1500px;
}

Answer 1

我不确定我是否理解你的要求。

但是，如果您希望容器扩展到页面的整个宽度，请将容器的宽度设置为100％，并从正文中删除填充和边距。

为什么我的页面上的内容无法扩展整个页面上的距离

1 个答案: