0

Everything was perfect, until I changed a width. Instead of wrapping to a new line like normal when it gets to the div boundary, it extrudes from the box. The line length is the same as it was BEFORE I changed the div width. The line width not change to accommodate the change in div width as one would expect.

Page in question

<!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

1

ラッパー div をコンテナ div と同じ幅にしたい場合は、これを使用してください。

#wrapper { 
    width: 100%; 
}

これで、ラッパーを更新することなく、メイン コンテナーの div を変更できます。

于 2013-10-17T20:39:17.240 に答える
0

あなた#wrapperのCSS幅は1050pxです。あなた#main-containerのCSS幅は100pxです。

したがって、メインコンテナの div は div を超えて拡張され#wrapperます。

の CSS 幅を調整するか、 にまたはを#main-container追加してオーバーフローをクリップします。overflow: hiddenoverflow: scroll#wrapper

于 2013-10-17T20:39:49.923 に答える