html - 最小宽度不适用于包装-6ren

html - 最小宽度不适用于包装

转载作者：行者123 更新时间：2023-11-28 05:59:32

出于某种原因，我无法使用最小宽度。我目前已将其排除在外。如果页面宽度太小，我的背景就放不下了(看图片)。我对创建网站和东西还很陌生。我的背景几乎就是我的整个设计，如果你没注意到的话。因此，重要的是它适合所有尺寸。我在哪里以及如何编写 min-with 代码？已经在#Container(我的包装器)下尝试过。提前致谢!

图片:IMGUR LINK

My HTML and CSS: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEBSITE</title>
<style type="text/css">
#Container {
    padding: 0px;
    width: 100%;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    height: 2000px;
    min-width:1000px;
}
#ContentContainer {
    padding: 0px;
    width: 1002px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}
#Header {
    margin: 0px;
    padding: 0px;
    height: 230px;
}
#Photo {
    margin: 0px;
    padding: 0px;
    height: 232px;
}
#Bilde1 {
    height: 100%;
    width: 347px;
    margin: 0px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    float: left;
}
#Bilde2 {
    height: 100%;
    width: 350px;
    margin: 0px;
    padding: 0px;
    float: left;
}
#Bilde3 {
    margin: 0px;
    padding: 0px;
    float: left;
    height: 100%;
    width: 305px;
}
#MainContent {
    height: 1300px;
    float: left;
    width: 626px;
    padding-left: 9px;
    padding-right: 5px;
}
#Search {
    margin: 0px;
    padding: 0px;
    float: right;
    height: 57px;
    width: 360px;
}
#SearchTab {
    margin: 0px;
    float: left;
    height: 42px;
    width: 290px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
}
#SearchButton {
    margin: 0px;
    padding: 0px;
    float: right;
    width: 60px;
    height: 57px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
#SideBar {
    margin: 0px;
    float: right;
    width: 340px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    height: 425px;
    font-family: "Century Gothic";
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
}
#SideChat {
    float: right;
    height: 480px;
    width: 355px;
    margin: 0px;
    padding-top: 17.5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#NavBar {
    margin: 0px;
    padding: 0px;
    height: 59px;
    background-image: url(bilder/navbg.jpg);
    background-repeat: no-repeat;
    background-size: 1100px 59px;

}

body { 
    background-image: url(bg.jpg) ;
    Background-color: #151924;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: local;
    overflow-x:hidden;
}
#sf{
    height:30px;
    width:285px;
    background-color:transparent;
    font-size:18px;
    font-family:"Century Gothic";
    outline:none;
    text-align: center;
}
#sb{
    width:60px;
    height:57px;
}
#Trades{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;
}
#Salg{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;

}
#Keys{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;  
}
#CSGODouble{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;
}
#Paypal{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;
}
#Quicksell{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;
}
#Gratis{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;  
}
#PC{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;  
}
#Diskusjon{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;
}
#Diverse{
    background-color: #e4e4e4;
    padding-left: 10px;
    margin-right: 5px;

</style>
<style>
#rolling-nav {
  font:normal 12px 'Trebuchet MS',Trebuchet,Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
    /* outline:1px solid; */
    width:100%; /* Fixed width. Measure it manually */
    margin:0px auto;
}

#rolling-nav ul {
  height:59px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:59px;
  color:grey;
  text-decoration:none;
  background-color:white;
  background-image:-webkit-linear-gradient(top, white 0%, #F7F7F7 50%, #F5F5F5 50%, #F1F1F1 100%);
  background-image:-moz-linear-gradient(top, white 0%, #F7F7F7 50%, #F5F5F5 50%, #F1F1F1 100%);
  background-image:-ms-linear-gradient(top, white 0%, #F7F7F7 50%, #F5F5F5 50%, #F1F1F1 100%);
  background-image:-o-linear-gradient(top, white 0%, #F7F7F7 50%, #F5F5F5 50%, #F1F1F1 100%);
  background-image:linear-gradient(top, white 0%, #F7F7F7 50%, #F5F5F5 50%, #F1F1F1 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone);
  position:absolute;
  top:100%;
    right:0px;
  left:0px;
  display:block;
  background-color:#ff6b35;
  background-image:-webkit-linear-gradient(top, #ff6b35, #C63D0C);
  background-image:-moz-linear-gradient(top, #ff6b35, #C63D0C);
  background-image:-ms-linear-gradient(top, #ff6b35, #C63D0C);
  background-image:-o-linear-gradient(top, #ff6b35, #C63D0C);
  background-image:linear-gradient(top, #ff6b35, #C63D0C);
  color:white;
}

#rolling-nav a:hover {
  margin-top:-59px;
  margin-bottom:1px;
}
#VisMer {
    height: 40px;
    width: 260px;
    margin: 0px;
    padding: 0px;
}
</style>

</head>

<body> 
<div id="Container">
  <div id="ContentContainer">
    <div id="Header" style="cursor: pointer;" onclick="location.href='index.html'"></div>
    <div id="NavBar">
    <nav id="rolling-nav">
    <ul>
        <li><a href="" data-clone="Hjem">Hjem</a></li>
        <li><a href="regler" data-clone="Regler">Regler</a></li>
        <li><a href="info" data-clone="Info">Info</a></li>
        <li><a href="mm" data-clone="Middleman">Middleman</a></li>
        <li><a href="kontakt" data-clone="Kontakt oss">Kontakt oss</a></li>
    </ul>
</nav>
    </div>
    <div id="Photo">
      <div id="Bilde1" style="cursor: pointer;" onclick="location.href='LINK'"></div>
      <div id="Bilde2" style="cursor: pointer;" onclick="location.href='LINK'"></div>
      <div id="Bilde3" style="cursor: pointer;" onclick="location.href='LINK'"></div>
    </div>
    <div id="MainContent">
    <div style="border: 0px solid #000; overflow: hidden; margin: 15px auto; max-width: 650px; opacity:1">
<iframe scrolling="yes" src="IFRAME LINK" style="border: 0px none; margin-left: 0px; height: 2575px; margin-top: -1380px; margin-bottom: -222px; width: 650px;">
</iframe>
</div>
    <div id="VisMer" style="cursor: pointer;" onclick="location.href='LINK'"></div>
    </div>
    <div id="Search">
    <form id="search" action="SITE LINK SEARCH?" method="get">
        <div id="SearchTab">
<input name="query" type="text" id="sf" style="color: white" onfocus="if (this.value == 'Søk') {this.style.color='#FF6B35   '; this.value=''}" onblur="if(this.value == '') { this.style.color='white'; this.value='Søk'}" value="Søk" />
</style>
        </div>
        <div id="SearchButton">
          <input type="image" src="bilder/blank.png" id="sb" alt"Btn">
        </div>
    </div>
    </form>
    <div id="SideBar"> <span style="font-size: 30px; color: #ff6b35;">FILTRER</span>
      <div id="Trades" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[Trade]'"><p style="color: #ff6b35">Trades</p></div>
      <div id="Salg" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[Salg]'"><p style="color: #ff6b35">Salg</p></div>
      <div id="Keys" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[Keys]'"><p style="color: #ff6b35">Keys</p></div>
      <div id="CSGODouble" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[CSGODouble]'"><p style="color: #ff6b35">CSGODouble</p></div>
      <div id="Paypal" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[PayPal]'"><p style="color: #ff6b35">PayPal</p></div>
      <div id="Quicksell" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[Quicksell]'"><p style="color: #ff6b35">Quicksell</p></div>
      <div id="Gratis" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[Gratis]'"><p style="color: #ff6b35">Gratis</p></div>
      <div id="PC" style="cursor: pointer;" onclick="location.href='SITE LINK SEARCH?query=[PC]'"><p style="color: #ff6b35">Price Check</p></div>
      <div id="Diskusjon" style="cursor: pointer;" onclick="location.href='SITE'"><p style="color: #ff6b35">Diskusjon</p></div>
      <div id="Diverse" style="cursor: pointer;" onclick="location.href='SITE'"><p style="color: #ff6b35">Diverse</p></div>

    </div>
    <div id="SideChat">
    <script type="text/javascript" src="LINK WITH CHAT BOX SCRIPT"></script></div>
  </div>
  <p>&nbsp; </p>
</div>
</body>
</html>

PS:我不希望我的网站响应。我希望它居中，但在 with 发生变化时不会改变。

最佳答案

从正文中删除边距。CSS:正文 {margin:0}

如果你想放背景图片，您可以使用 background-size 代替“cover”选项。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

关于html - 最小宽度不适用于包装，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36849079/

文章推荐： c++ - Objective-C++ 将 std::string 转换为 NSString

文章推荐： html - 一个元素不会显示在媒体查询 1280px

文章推荐： Swift 集包含复杂性

文章推荐： json - 更新结构中的特定值

python 包装
正在尝试创建一个 python 包。似乎有效，但我收到警告。我的 setup.py 是: #! /usr/bin/env python from distutils.core import setup
haskell - 包装/展开通用量化类型
我导入了一个数据类型 X ，定义为 data X a = X a 在本地，我定义了一个通用量化的数据类型，Y type Y = forall a. X a 现在我需要定义两个函数， toY 和 fro
rust - 包装 AsyncRead
我似乎无法让编译器让我包装 Tokio AsyncRead: use std::io::Result; use core::pin::Pin; use core::task::{Context, Po
python - 一个接一个地调用Python函数，包装？
我有两个函数“a”和“b”。当用户上传文件时，“b”被调用。 “b”重命名文件并返回新文件名。之后应该编辑该文件。像这样: def a(): edits file def b(): r
.net - 包装 IQueryable
我使用 Entity Framework 作为我的 ORM，我的每个类都实现了一个接口(interface)，该接口(interface)基本上表示表结构(每个字段一个只读属性)。这些接口(inter
java - 包装 jframe
有没有办法打开一个程序，通常会打开一个新的jframe，进入一个现有的jframe？这里是解释，我下载了一个java游戏，其中一个是反射游戏，它在一个jframe中打开，框架内有一堆子面板，我想要做
Android 包装 block ？
我想要下面的布局 | AA BBBBBBB | 除非没有足够的空间，在这种情况下 | AA | | BBBBBBB | 在这种情况下，A 是复选框，B 是复选框旁边的 Text
CSS 问题 - 包装
我正在尝试以不同的方式包装我的网站，以便将背景分为 2 部分。灰色部分是主要背景，还有白色部分，它较小并包装主要内容。基本上我想要this看起来像this . 我不太确定如何添加图像来创建阴影效果，
Java - IntBuffer 包装
我正在使用 : 读取整数文件 int len = (int)(new File(file).length()); FileInputStream fis = new FileInputStream(f
JavaFX 包装 : NoClassDefFoundError
我使用 maven 和 OpenJDK 1.8 打包了一个 JavaFX 应用程序我的 pom.xml 中的相关部分: maven-assembly-plugin
.net - 包装 ItemsControls 的内容
我正在使用两个不同的 ItemsControl 来生成一个按钮列表。
macros - 包装 TimerOutputs 宏
我有一个情况，有一个变量会很方便，to , 可以是 TimerOutput或 nothing .我有兴趣提供一个采用与 @timeit 相同参数的宏来自 TimerOutputs(例如 @timeit
css - 包装 DIV 的边距问题
我正在尝试包装一个名为 content 的 div与另一个具有不同背景的 div。但是，当将“margin-top”与 content 一起使用时div，似乎包装 DIV 获得了边距顶部而不是 co
.net - 什么是 dnu 包装？
文档不清楚，它似乎允许包装 dll 和 csproj 以在 Asp.Net Core 5 应用程序中使用。它是否允许您在 .Net Core 5 网站中使用针对 .Net Framework 4.6
nservicebus3 - 包装 NServiceBus.IHandleMessages
我被要求开发一个层，该层将充当通用总线，而不直接引用 NServiceBus。到目前为止，由于支持不引人注目的消息，这并不太难。除了现在，我被要求为 IHandleMessages 提供我们自己的定义
javascript - 包装 getServerSideProps 抛出异常
我正在尝试包装 getServersideProps使用身份验证处理程序函数，但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
scala - 定制 SBT 包装
我有一个项目，它在特定位置(不是/src/resources)包含资源(模板文件)。我希望在运行 package-bin 时将这些资源打包。我看到了 package-options 和 packag
javascript - 优化 Jade 包装
我正在寻找打印从一系列对象中绘制的 div。我可以通过使用下面的管道语法来实现这一点。 each i, key in faq if (key == 0) |
javascript - 包装 Collection.insert
我在 Meteor.js“main.js - Server”中有这个方法。 Meteor.methods({ messageSent: function (message) { var a
dart - 包装 polymer 元素纸张输入的验证错误
我注意到，如果我的自定义Polymer 1.x元素的宽度比纸张输入元素上的验证错误消息的宽度窄，那么错误将超出自定义元素的右边界。参见下图: 有没有一种机制可以防止溢出，例如在到达自定义元素的边界时自

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 最小宽度不适用于包装