Question

我正在使用ASP.NET web-forms，C＃，bootstrap框架，使用visual studio 2013设计一个网站。它是一个艺术家的画廊保留他的工作样本。我使用母版页来保存网站的菜单和徽标，主要内容保存在包含其他元素的包装内，以便保留图像。这是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消失了，里面的标签在页面上移动。我想阻止元素移动浏览器重新调整大小。我也使用了postion：修复了我的css代码，但它没有做任何改动。这是重新调整浏览器大小后的网站：！[在此输入图像说明] [3]

如你所见，包装纸已经消失。

Answer 1

添加一个<div class="clearfix"></div>

Navbar html部分。
OR
使用div id= mainContainer之前的{{1}}。

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

1 个答案: