gpt4 book ai didi

jquery - 在浏览器调整大小时保持
元素位置不变

转载 作者:太空宇宙 更新时间:2023-11-04 12:43:30 26 4
gpt4 key购买 nike

我正在使用 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 部分之后。
或者
之前divid= mainContainer .

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com