2

我已经开始制作一个网站，并希望在我的导航栏下方放置一个横幅。我最初将两个 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 保持完全静止，即使在调整大小时也是如此。EG 调整窗口大小时，窗口的边框会移动，但内容仍然完全静止。

4

3 回答 3

4

正在询问#contentHeader imgand #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;
}

现在您只需要调整左右定位元素的宽度，使它们位于您希望它们所在的位置 =)

这是在 jsfiddle 上。我在这里围绕图像 ( #contentHeaderImg) 制作了另一个 div，因为我不知道您的图像宽度 - 以便于定位。

因此，分配宽度应该可以解决问题，但是您不能在调整大小时同时浮动到边缘并且两个元素的排列相同......只有当您按比例缩放所有标题内容时才有可能。

于 2013-05-10T22:17:22.117 回答
3

如果您想要图像并headerText并排，您必须给他们足够的空间来这样做。添加适当的宽度到#wrapper 

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width:960px;
}

JSFiddle（包装器/宽度）

如果您总是想占据整个宽度，请min-width改用

#wrapper {
    margin-left: auto;
    margin-right: auto;
    min-width:960px;
}

JSFiddle（包装器/最小宽度）

于 2013-05-10T22:45:31.860 回答
0

为了防止在调整浏览器窗口大小时内容移动，您只需要避免使用绝对测量单位（像素），而只使用百分比 % 和视口单位 vw。这对我很有效。我在我的 Div 中使用了这些样式。

.centercolumn {
float: left;
width: 50%;
padding: 1%;
background-color: #f8df67;
height: 80vh;
margin-top: 1%;
margin-left: 0px;
margin-right: 1%;}


.sidecolumn {
float: left;
width: 20%;
padding: 1%;
margin-top: 1%;
margin-left: 0px;
margin-bottom: 1%;
height: 80vh;}
于 2020-09-30T09:34:10.737 回答