jquery - 在浏览器调整大小期间保持 <div> 元素位置不变

标签 jquery html css twitter-bootstrap web

我正在使用 Visual Studio 2013 使用 ASP.NET web-forms、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 部分之后。
要么
之前 divid= mainContainer .

关于jquery - 在浏览器调整大小期间保持 <div> 元素位置不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26696649/

相关文章:

jquery - Windows XP和IE8组合-div对齐问题

javascript - 背景位置变量不起作用

jquery - 动画完成后使用 JQuery 更改 CSS

javascript - 使用 javascript/jquery 删除字符串的开头

javascript - 提交两个表单,其中 form2 输入值取决于 form1 输入值

html - 如何在列表中显示隐藏的div

javascript - 使用 jQuery 在 HTML <select/> 中将键值对保持在一起?

jquery - 在 Shiny 的 selectInput 中自定义下拉宽度

asp.net - 如何去除 <a> 生成的图像周围的边框?

css - 如何在 Bootstrap col-md-1 中进行滚动