0

一切都很完美，直到我改变了宽度。当它到达 div 边界时，它不会像往常一样换行，而是从盒子中挤出。行长与我更改 div 宽度之前相同。线宽不会像人们期望的那样改变以适应 div 宽度的变化。

有问题的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to TF2Shop</title>
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="../main.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />

<!-- Icomoon -->
<link rel="stylesheet" type="text/css" href="../icomooncss/style.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-top">
    <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">TF2 Shop</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="../">Home</a></li>
              <li><a href="../bank/">Bank</a></li>
              <li class="active"><a href="#">About</a></li>
              <li><a href="../contact/"><i class="icon-envelope" style="margin-right: 4px;"></i>Contact</a></li>
              <li><a href="../donate/"><i class="icon-heart" style="margin-right: 4px;"></i>Donate</a></li>
            </ul>
          </div><!--/.nav-collapse -->
          <div style="float: right; margin-top: 8px;"><img src="../images/steam.png" /></div>
        </div>
    </div>
</div>
<div id="wrapper" style="height: 600px">
<div id="main-container">
<div id="about-section">
<ul>
    <h1 style="text-decoration: underline; padding-top: 50px;">About</h1>
    <li style="margin-bottom: 100px;">TF2bank was created by Josh Osborne, who is also the creator of Viddir.com. TF2 was the very first game he played on Steam and will always have a special place in his heart.</li>
    <h1 style="text-decoration: underline;">Technology</h1>
    <li style="margin-bottom: 100px;">TF2bank was built using HTML and CSS. SteamBot, written by Jesse Cardone is the base engine for the trade bots.</li>
    <h1 style="text-decoration: underline;">Special Thanks</h1>
    <li>Special thanks goes to Jesse Cardone, creator of SteamBot. Special thanks also goes to Valve for creating TF2 and Steam. And of course special thanks does to Slender Man from the StrangeBank for first
    helping me code my first buds bot script and was patient and helpful the whole time!</li>
</ul>
</div>
</div>
</div>

<div id="footer">
<div id="copyright">© TF2Shop 2013</div>
 <!-- <div id="info">A Slender Mann and Whizzard of Oz Collaboration</div> -->
<div style="color: #2f3034; height: 135px; width: 320px; padding-top: 30px; margin: 0 auto; font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center;">
<div style="">
  <h1 style="font-size: 57px; margin-top: -24px; padding-top: 3px; font-weight: bold; line-height: 56px;"><span style="font-size: 29px">Powered by</span><br /><span style="color: #313131; margin-left: -4px;">Steam</span></h1>
</div>
</div>
</div>
</body>
</html>
4

4 回答 4

3

你main-container的比你的wrapperdiv 大。

#main-container {
    width:1100px;
    ...
}

#wrapper {
    width:1050px;
    ...
}
于 2013-10-17T20:36:02.843 回答
1

如果您希望包装器 div 的宽度与容器 div 的宽度相同，请使用以下命令：

#wrapper { 
    width: 100%; 
}

现在您可以更改主容器 div 而无需更新包装器。

于 2013-10-17T20:39:17.240 回答
1

您的问题是您已将#wrapperdiv 设置为1050px并将其子 divmain-container设置为1100px。

于 2013-10-17T20:36:45.980 回答
0

您#wrapper的 CSS 宽度为 1050 像素。您#main-container的 CSS 宽度为 100 像素。

因此，主容器 div 超出了#wrapperdiv。

调整 的 CSS 宽度，或通过添加或来#main-container剪辑溢出。overflow: hiddenoverflow: scroll#wrapper

于 2013-10-17T20:39:49.923 回答