我正在使用 Visual Studio 2013 使用 ASP.NET 网络表单、C#、bootstrap 框架设计一个网站。它是一个艺术家画廊 保留他的工作样本。我使用母版页来保存网站的菜单和 Logo ，并将主要内容保存在包含其他元素的包装器中以保留图像。这是 default.aspx html 代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/main/Default.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="kiobic.main.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../css/css/bootstrap.css" rel="stylesheet" />
<script src="../css/js/bootstrap.js"></script>
<script src="../css/js/jquery-1.11.1.js"></script>
<script src="../css/js/jquery.js" ></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="clearfix">
<div class="col-lg-8-W940" id="mainContainer">
<div id="artThumbNailContainer1" class="col-md-4-w278"><img src="media/1.png"/>
<div><h6>Immortal</h6></div>
</div>
<div id="artThumbNailContainer3" class="col-md-4-w278"><div><img src="media/2.jpg"/">
</div> </div>
<div id="artThumbNailContainer4" class="col-md-4-w278"><img src="media/3.jpg"/></div>
<div id="artThumbNailContainer5" class="col-md-4-w278"><img src="media/4.jpg"/></div>
<div id="artThumbNailContainer6" class="col-md-4-w278"><img src="media/5.jpg"/></div>
<div id="artThumbNailContainer7" class="col-md-4-w278"><img src="media/6.jpg"/></div>
<div id="artThumbNailContainer8" class="col-md-4-w278"><img src="media/7.jpg"/></div>
<div id="artThumbNailContainer9" class="col-md-4-w278"><img src="media/8.jpg"/></div>
<div id="artThumbNailContainer10" class="col-md-4-w278"><img src="media/9.png"/></div>
</div>
</div>
</asp:Content>
default.master 代码在这里:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.Master.cs"
Inherits="kiobic.main.Index1" %>
<!DOCTYPE html>
<html lang=" eng">
<head runat="server">
<title>CyrusArt</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../css/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- artist name image -->
<div class="navbar-header" >
<img src="../media/Artistname_banner_resize_3.png" />
</div>
<!--menu bar -->
<div class="clearfix">
<div class="navbar-container-horizontal">
<div class ="custom-menu-container">
<a class="custom-link" href="#" id ="homeHref" name ="cyrusArt">Home</a>
</div>
<div class ="custom-menu-container">
<a class="custom-link" href="#" id ="homeHref2" name ="cyrusArt">Info </a>
</div>
<div class ="custom-menu-container">
<a class="custom-link" href ="#" id ="homeHref3" name ="cyrusArt">Contact</a>
</div>
<div class ="custom-menu-container">
<a class="custom-link" href="#" id ="homeHref4" name ="cyrusArt">Store</a>
</div>
<div class ="custom-menu-container">
<a class="custom-link" href="#" id ="homeHref5" name ="cyrusArt">Blog</a>
</div>
<div class ="custom-menu-container">
<a class="custom-link" href ="#" id ="homeHref6" name ="cyrusArt">Advice</a>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../css/js/bootstrap.min.js"> </script>
<script src="../css/js/jquery-1.11.1.js"></script>
<script src="../css/js/jquery.js" ></script>
< /body>
</html>
![在此处输入图片描述][1]
default.aspx 页面以正常方式看起来像这样: ![在此处输入图片描述][2]
“问题”是当我重新调整浏览器大小时，主 div 消失了，里面的标签在页面上移动。我想防止元素在浏览器调整大小时移动。我还在我的 css 代码中使用了 postion:fixed 但它没有进行任何更改。 这是调整浏览器大小后的网站: ![在此处输入图片描述][3]
如您所见，wrapper 不见了。
最佳答案
加一个<div class="clearfix"></div>
在导航栏 html 部分之后。
或者
之前div与 id= mainContainer .
关于jquery - 在浏览器调整大小时保持 <div> 元素位置不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26696649/