个人中心
gpt4 book ai didi

html - 调整大小时内容移动

转载 作者：行者123 更新时间：2023-12-02 15:36:33 25 4
gpt4 key购买 nike

我已经开始制作一个网站，并希望在我的导航栏下方放置一个横幅。我最初将两个 div 的位置完全按照我想要的方式放置，但是在调整大小时，右侧的 div 移动到左侧的 div 下方。两者都使用 float:left 和 float:right 定位。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Welcome </title>
<link rel="stylesheet" type="text/css" href="Style1.css">
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="topHeader">
<div id="logo">
<img src="Images/HeaderLogo.png"  alt="Logo for Matt Meadows">
</div>

</div> <!--End of topHeader -->
</div> <!--End of Header -->
<nav>
<div id="nav-links">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

</nav>
<div id="contentHeaderContainer">
<div id="contentHeader">
<img src="Images/HomePageContentHeader.png">
<div id="headerText">
<h1 id="welcome">WELCOME</h1>
<p class="Text1">The Way Website Development should be...</p>
<p class="Text2">UNIQUE</p>
<p class="Text5">CONCISE</p>
<p class="Text3">VIBRANT</p>
<p class="Text4">PROFESSIONAL</p>
<p class="Text6">SIMPLE</p>
</div> <!--End of headerText -->
</div> <!--End of contentHeader -->
</div> <!--End of contentHeaderContainer -->
</div> <!--End of wrapper -->
</body>
</html>

CSS:

body, html
{
margin:0;
  height:100%;
  width:100%;
}

#wrapper
{
margin-left: auto;
margin-right: auto;
}

#topHeader
{
width: 100%;
height:75px;
background: rgb(36,36,36); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
}

#logo
{
margin-left: 50px;
padding-top: 10px;
}

nav
{
float:left;
width: 100%;
height: 45px;
background: url('Images/NavBG.png');
-webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
-moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
}

#nav-links
{
margin: 0 auto;
}

ul
{
margin:0 auto;
padding:0;
list-style:none;
width: 700px;
}

li
{
display:inline;
float:left;
padding: 10px 55px 10px 55px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}

li:hover
{
background: #4d4c4c;
color: #FFF;
}

#contentHeaderContainer
{
height: 450px;
margin-left: auto;
margin-right: auto;
background: rgb(36,36,36); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
-moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
}


#contentHeader img
{
float:left;
margin-top: 50px;
}


#headerText
{
float:right;
width: 700px;
height: 300px;
}

#welcome
{
font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #cccccc
}

p
{
font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.Text1
{
color: #999999;
font-size: 20px;
font-weight: bold;
}

.Text2
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 100px;
margin-top: 50px;
}

.Text3
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 350px;
margin-top: 50px;
}

.Text4
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 100px;
margin-top: 50px;
}

.Text5
{
float:right;
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-top:-50px;
}

.Text6
{
float:right;
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-top:-50px;
}

编辑:http://jsfiddle.net/w6qxU/

我希望 #contentHeaderContainer 中的两个子 div 保持完全静止，即使在调整大小时也是如此。例如，当调整窗口大小时，窗口的边框移动，但内容保持绝对静止。

最佳答案

是在询问 #contentHeader img 和 #headerText 吗？ - 这些是为我在调整窗口大小时改变位置的那些。

你可以绝对定位它们并给它们 left:0; 和 right:0; 而不是 float:left; 和 float:right; 分别。

也许，像那样:

#contentHeader {
    position:relative;
    width:100%;
}

#contentHeader img {
    position:absolute;
    left:0;
    top:90px;
}

#headerText {
    position:absolute;
    right:0;
    top:45px;
    width:700px;
    height:300px;
}

jsfiddle

这样图像就不会把文本推下去，而是留在它后面。如果这不是您想要的，您可能需要稍微澄清一下这个问题。

编辑:

要使元素之间保持固定距离，您必须为容器分配固定宽度。但通常情况下，当您调整窗口大小时，它们不会保持居中，因为左边缘会开始将容器推向右侧。但是您可以使用一个技巧，通过执行以下操作在窗口调整大小时保持与页面中心同样远的距离(例如，我们假设固定宽度为 1200 像素):

#contentHeader {
    position:relative;
    width:1px;
}

#contentHeaderImg {
    position:absolute;
    right:0;
    width:500px;
    top:90px;
    text-align:left;
}

#headerText {
    position:absolute;
    left:0;
    top:45px;
    width: 700px;
    height: 300px;
}

现在你只需要调整左右定位元素的宽度，让它们位于你想要的位置 =)

Here it's on jsfiddle.我在此处围绕图像 (#contentHeaderImg) 创建了另一个 div，因为我不知道您的图像宽度 - 以便于定位。

So, assigned the width should do the trick, but you can not have floating to the edge and the same arrangement of the two elements at the same time while resizing ... that would be possible only if you proportionally scale all the header contents.

关于html - 调整大小时内容移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16491324/

25 4 0
文章推荐： sql - 关键字 'FOR' 附近的语法不正确
文章推荐： r - 没有左参数的公式在 R 中意味着什么，例如〜x？
文章推荐： sql - Oracle 查询 - 如何计算返回值为 0 的值
文章推荐： sql - 将 SQL 语句转换为 JPQL 语句
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com