个人中心
gpt4 book ai didi

html - Div 标签跳出其正常流程

转载 作者：行者123 更新时间：2023-11-28 17:45:40 26 4
gpt4 key购买 nike

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

当我调整浏览器窗口大小时，特别是当我将浏览器窗口调整为较小尺寸时，div 元素会跳出它的正常流程，并且在我的 CSS 容器 ID 中提供 width:100% 值时，所有内容都会散落。

但是当我以像素为单位给出包装器 id 的宽度(比如 960 像素)时，一切正常并且看起来很好。但我想设计一个全宽浏览器窗口网站，以便它可以根据任何浏览器窗口大小进行调整请告诉我如何完成。

jsfiddle 链接是 http://jsfiddle.net/9BuHt/3/

我的 CSS 代码如下:-

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

当我调整浏览器窗口大小时，特别是当我将浏览器窗口调整为较小尺寸时，div 元素会跳出其正常流程，并且在我的 CSS 容器 ID 中提供 width:100% 值时，所有内容都会分散。

但是当我以像素为单位给出包装器 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>

最佳答案

有些情况下您需要专门修复小浏览器窗口(这可能就是其中之一)

.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% 的 header ，其中包含一些 float 元素。

在它下面有一个 float 的左侧边栏。

使它看起来更好的 2 个修复是:

clear: both; 在你的#sidebar

并在 login_panel 上使用 max-width 而不是 width

所以 clear: both 将确保它考虑了向左或向右浮动的任何元素。

max-width 表示 login_panel 在屏幕很大的时候不会太大，但是当屏幕很小的时候，它不会熄灭-屏幕。

关于html - Div 标签跳出其正常流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23247811/

26 4 0
文章推荐： html - 如何在CSS中实现最小左/右
文章推荐： html - XSL 中空白的奇怪 CSS 问题
文章推荐： iphone - iOS - UIWebview - 滚动并按住停止 JavaScript
文章推荐： JavaScript var = int ||整数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com