Question

我已将包装器的高度设置为auto，因此它会自动调整到任何屏幕，但包装器不会包裹内部div。包装似乎是150px，即使我不知道为什么。注意：包装器是容器。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Playstation 4 Home Page English</title>
<style type="text/css">
@import url("styles/Default Style.css");
@import url("styles/Homepage.css");
@import url("styles/styles.css");
</style>
<link rel="shortcut icon" href="images/icons/Playstation-logoicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../engine1/style.css" />
    <script type="text/javascript" src="../engine1/jquery.js"></script>
</head>

<body style="background:#CCCCCC;">
<div id="Container">
      <div id="Header"> <img src="images/Header.png" width="400" height="95" 
  style=
  "position: absolute; 
  left: 189px;
  top:10px;">
        <div id="Social-Networks"><a href="http://www.playstation.com" title="Officiële Playstation-Website" target="_blank"><img src="images/icons/Playstation-logo.png" width="36" height="36"></a><a href="https://www.youtube.com/user/PlayStation" title="Officiële Playstation Youtube Kanaal" target="_blank"><img src="images/icons/1387937374_Youtube.png" width="36" height="36" style="margin-left:5px;"></a><a href="https://twitter.com/PlayStation" title="Officiële Playstation Twitter" target="_blank"><img src="images/icons/1387937314_Twitter.png" width="36" height="36"
          style="margin-left:5px;"></a><a href="https://www.facebook.com/PlayStation" title="Officiële Playstation Facebook" target="_blank"><img src="images/icons/1387947454_Facebook.png" width="36" height="36" style="margin-left:5px;"></a></div>
      </div>
      <div id="ContentHolder">
        <div id='cssmenu'>
          <ul>
            <li class='active'><a href='homepage.html'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Artikelen</span></a>
              <ul>
                <li class='has-sub'><a href='#'><span>Nederlands</span></a> </li>
                <li class='has-sub'><a href='#'><span>Engels</span></a> </li>
              </ul>
            </li>
            <li><a href='gallery.html'><span>Galerij</span></a></li>
            <li style="float:right" class='last'><a href='#'><span>Over</span></a></li>
            <li style="float:right" class='has-sub'><a href='#'><span>Contact</span></a></li>
          </ul>
          <div id="wowslider-container1">
    <div class="ws_images"><ul>
<li><img src="../data1/images/SonyPlaystationGeschiedenisSlider.jpg" alt="SonyPlaystationGeschiedenisSlider" title="Het onstaan van Het Gaming Icoon" id="wows1_0"/></li>
<li><img src="../data1/images/RemotePlayPS4PSVita.jpg" alt="RemotePlayPS4PSVita" title="Remote-Play voor de PS4 en PS Vita" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="De geschiedenis van de Sony Playstation">1</a>
<a href="#" title="Remote-Play voor de PS4 en PS Vita">2</a>
</div></div>
    <div class="ws_shadow"></div>
    </div>
    <script type="text/javascript" src="../engine1/wowslider.js"></script>
    <script type="text/javascript" src="../engine1/script.js"></script>
          <div id="Side-Content"> 
            <script type="text/javascript" src="http://output78.rssinclude.com/output?type=js&amp;id=815822&amp;hash=b0095ae8bebb910e5dc0f397a646173e"></script>
          </div>
          <div id="ContentHolder1">
            <h1>Welkom op onze Playstation 4 News Website!</h1>
            adjskl;fjaklsfdjaflds;
            <hr>
            lkdajf;lkdaj;fas
            </div>
        </div>
      </div>
      <div id="Copyright">&copy;Copyright Mounteder Abdulrazag, Tom Borghouts</div>
      </div>
</body>
</html>

我的CSS：

@charset "utf-8";
/* CSS Document */

body { 
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px
}

#Container {
    height:auto;
  width: 975px;
  margin-left:auto;
  margin-right:auto;
  background-color:#006;
  overflow:hidden;
}

#Wrapper {
    margin:auto;
  background-color:#EEEEEE;
  width: 975px;
  margin-left: auto;
  margin-right: auto;
}

#ContentHolder {
  width:975px;
  background-color:#0F0;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;

}

#Header {
  height: 125px;
  margin-right: auto;
  margin-left: auto;
  background-color: #000;
  width: 975px;
}

#Social-Networks {
  height:36px;
  width:164px;
  margin-right:230px;
  margin-top:80px;
  float:right;
}

#Social-Networks img {
  opacity:1;  
}

#Social-Networks img:hover {
  opacity:0.9;
}

#ContentHolder1 {
  width:650px;
  height:925px;
  margin-left:42px;
  margin-right:auto;
  margin-top:-10px;
  background-color:transparent;
  color: #8B8B8B;
}

#Side-Content {
  width:250px;
  height:600px;
  float:right;
  background-color:transparent;
}

#Content1 {
  width: 725px;
  height:1235px;
  color: #9B9B9B;
  margin-top:-18px;
  margin-left:5px;
  background-color: #03C;
  border-radius: 4px 0px 0px 0px;
  text-align: center;
  font-family: "Open Sans";
}

hr {
    height: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 4px;
}

#Copyright {
  height: 25px;
  width: 975px;
  margin-right: auto;
  margin-left: auto;
  background-color: #0000d3;
  text-align:left;
  font-family:"Open Sans";
}

Answer 1

试

#Container {
    float: left;              //this
    display: inline-block;    // or this
}

包装不包装

1 个答案: