Question

我是网页设计的新手，我正在为我的大学项目设计一个网站。现在，我正面临一个问题如下： -

当我调整浏览器窗口的大小时，特别是当我将浏览器窗口调整为小尺寸时，div元素会跳出它的正常流程，并且在给出宽度时所有内容都会分散：我的容器ID中的值为100％ CSS。

但正如我给出包装器id的宽度（以960px为单位），一切正常，看起来很好。但我想设计一个全宽度的浏览器窗口网站，以便它可以调整任何浏览器窗口大小请告诉我它是如何做到的。

我的CSS代码如下： -

我是网页设计的新手，我目前正在为我的大学项目设计一个网站。现在，我面临的问题如下：

当我调整浏览器窗口的大小时，特别是当我将浏览器窗口调整为小尺寸时，div元素跳出其正常流程，并且在给出宽度时所有内容都分散：我的容器ID为100％。< / p>

但正如我给出包装器id的宽度（以960像素为单位），一切正常，看起来很好。但我想设计一个全宽度的浏览器窗口网站，以便它可以调整任何浏览器窗口大小。请告诉我怎么做。我的CSS代码如下：

html {
  height: 100%;
  width: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  background-color: #e9e5e5;
}
* {
  margin: 0px;
  padding: 0px;
}
#container {
  min-height: 300px;
  margin: 0 auto;
  width: 1400px;
}
#header {
  height: 150px;
  width: 100%;
}
#logo {
  padding-top: 10px;
  padding-left: 20px;
  float: left;
}
#header #title_panel {
  float: left;
  padding-top: 25px;
  min-width: 60px;
}
#header #title_panel h1 {
  color: #125ab4;
  font-size: 36px;
}
#header #title_panel p {
  color: #f5071d;
  font-size: 20px;
  font-family: "Comic Sans MS", cursive;
}
#search_panel {
  margin: 10px 0px 0px 80px;
  float: left;
  width: 180px;
  position: relative
}
#search_panel img {
  float: right;
  margin-top: -20px;
  z-index: 1;
}
#search_field, #usrnam_field, #pwd_field {
  border-radius: 20px;
  color: #999;
  padding-left: 4px;
s
}
#login_panel {
  float: right;
  width: 520px;
  margin: 10px 200px 0px 0px;
  min-height: 40px;
}
#login_btn, #signup_btn {
  height: 20px;
  width: 70px;
  border-radius: 30px;
  background: #125ab4;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
 .
}
#login_btn {
  float: right;
  margin-top: -20px;
  text-decoration: none;
}
#signup_btn {
  margin: 0 auto;
}
#header h3 {
  text-align: center;
  padding-right: 20px;
  color: #125ab4;
}
#sidebar {
  min-height: 200px;
  width: 136px;
  margin-top: -20px;
  border: solid 1px #999999;
  background: #FFF;
}
#sidebar_header {
  height: 32px;
  background-color: #009933;
}
#sidebar_header h2 {
  text-align: center;
  text-decoration: none;
  color: #FFF;
  vertical-align: middle;
  text-decoration: none;
  padding-top: 2px;
}
#sidebar_header img {
  position: absolute;
  float: left;
  margin-left: 15px;
}
#sidebar ul {
  list-style: none;
}
#sidebar ul a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  color: #009933;
}
#sidebar ul li {
  padding-top: 15px;
  text-align: center;
  display: block;
  vertical-align: middle;
}
#sidebar a:hover {
  background-color: #009933;
  padding: 10px 5px 10px 5px;
  color: #FFF;
}

html代码如下： -

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Store-The one stock shop for all</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <div id="header">
    <div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"></div>
    <div id="title_panel">
      <h1>App Store</h1>
      <p>The one stock shop for all</p>
    </div>
    <div id="search_panel">
      <form action="" method="post">
        <input name="search" type="text" value="Search..." id="search_field">
      </form>
      <img src="images/Search_icon.png" width="22" height="22" alt="SearchIcon"> </div>
    <div id="login_panel">
      <form action="" method="post">
        <input name="usrname" type="text" value="Username" size="30" id="usrnam_field">
        <input name="psswrd" type="text" value="Password" size="30" id="pwd_field">
      </form>
      <a href="#">
        <div id="login_btn">Login</div>
      </a>
      <h3>&nbsp;</h3>
      <h3>Not a member yet?</h3>
        <a href="#">
      <div id="signup_btn"> Signup</div>
      </a> 
    </div>
  </div>
  <div id="sidebar">
    <div id="sidebar_header"> <img src="images/logo_small.png" width="22" height="28" alt="logoIcon">
      <h2 style="">Store</h2>
    </div>
    <ul>
      <li><a href="#">Technologies</a></li>
      <li><a href="#">Categories</a></li>
      <li><a href="#">Developers</a></li>
      <li><a href="#">Apps</a></li>
    </ul>
  </div>
</div>
</div>
</body>
</html>

Answer 1

在某些情况下，您需要专门修复小型浏览器窗口（这可能只是其中之一）

.myClass {
   width: 50%;
}

但小尺寸，50％不够大，我们100％

@media (max-width: 600px) {
  .myClass {
    width: 100%;
  }
}

所以当浏览器窗口小于600px时，我们会修复它。

这是常见的设备尺寸http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

修改

在创建代码的html文件并查看它之后，看起来你有100％的标题，其中包含一些浮动元素。

根据你的左边有一个浮动。

使其看起来更好的2个修复程序是：

您clear: both;

上的

#sidebar

并在max-width

上使用width代替login_panel

所以clear: both会确保它说明左侧或右侧浮动的任何元素。

max-width表示login_panel在屏幕很大时不会变得太大，但是当屏幕很小时，它就不会出现在屏幕外。

Answer 2

我正确理解你。您需要为任何设备支持创建流体标记。因此，请查看我的示例并尝试以相同的方式调整您的代码。

因此，例如，桌面上需要#wrapper width = 960px，移动设备需要全尺寸内容（如果设备宽度<960px）。所以你的代码必须是：

<强> HTML

#wrapper {
    max-width:960px;
    margin:0 auto;
    overflow:hidden // if you have float elements inside wrapper
}

如果您有疑问 - 欢迎

Div标签跳出正常流量

2 个答案:

修改