Question

一切都很完美，直到我改变了宽度。它不是在到达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>

Answer 1

您的main-container大于wrapper div。

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

#wrapper {
    width:1050px;
    ...
}

Answer 2

您的问题是，您已将#wrapper div设置为1050px，将其子div main-container设置为1100px。

Answer 3

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

#wrapper { 
    width: 100%; 
}

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

Answer 4

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

因此主容器div超出了#wrapper div。

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

为什么文本会挤出？

4 个答案: