Question

我有一个简单的网站，我是从头开始制作的。我对标题的布局感到困惑：

H1 title
文字行
标志
菜单（来自w3school的编码）

这四个都在我的div标题内。我希望能够在div中的任何地方定位它们。我遇到的问题是我不确定使用什么编码（边距，位置：相对或绝对，填充，顶部：，右边等）。

我尝试了各种各样的组合，但似乎它们从未定位在我想要它们的位置并且它们弄乱了彼此的位置：菜单丢失了整个宽度，徽标我无法在顶部和顶部之间获得相同的空间。标题div右侧，H1和标记似乎不响应我设置的像素，依此类推。

有人可以请花点时间看看我的代码并提出如何使这种布局稳定的建议吗？

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
	background-color: #F8F8F8;
	}

#page {
	width: 900px;
	margin: 30px auto;
	background-color: #FFFFFF;
	}

#header {
	height: 377px;
	width: 100%;
	background-image: url(images/banner.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	}

#header a {
	color: black;
	text-decoration: none;
	}
	
#header ul {
	list-style-type: none;
	margin-top: 0;
	padding: 0;
	overflow: hidden;
	background-color: #3399FF;
	position: relative;
	top: 264px;
	}
	
#header li {
	float: left;
	}
	
#header li a {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

#header li a.active {
    background-color: gray;
    }

#header li a:hover:not(.active){
	background-color: #3366CC;
	}

.p1 {
	font-family: Consolas, monaco, monospace; 
    font-size: 20px;
	position: relative;
    top: 28px;
	left: 50px;
	}		
	
.p2 {
    font-family: Consolas, monaco, monospace;
	font-size: 16px;
    position: relative;
    top: 5px;
	left: 200px;
	}

.logo {
	float: right;
	position: relative;
	top: 8px;
	right: 8px;
	}
	
#content {
	position: relative;
	top: 12px;
	left: 10px;
	}
	
#footer {
	font-size: 14px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	border-top: #D3D3D3 0.5px solid;
	}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><a href="http://www.finasteride-kopen.nl"><h1>This is my H1 Title</h1></a></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li><a href="">Link menu 2</a></li>
<li><a href="">Link menu 3</a></li>
<li><a href="">Link menu 4</a></li>
<li><a href="">Link menu 5</a></li>
<li><a href="">Link menu 6</a></li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>

Answer 1

第一个建议：尝试将网页视为对象列表而不是海报等。屏幕尺寸各不相同（桌面/移动设备），您应该使用相对宽度和位置来确保网站的响应能力。我确定你可以找到一个更好的模板来处理。

第二个建议：如果您希望在任何地方定位元素＆＃34;这是正确使用定位的一个例子：

<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>

Answer 2

将标题的内容放在无序列表中。如果您正在使用像Bootstrap这样的响应式框架，那么这将完全不同 - 但由于您没有指定，这里是一个没有框架的示例。

<强> HTML

<div id="header>
<ul>
  <li><h1>Your Title</h1></li>
  <li><p>some line of text you wanted</p></li>
  <li class="logo"><a href="index.html"><img src="yourlogo.png" /></a></li>
  <li class="spacer"></li>
  <li><a href="somepage.html>Some Page</a></li>
  <li><a href="somepage.html>Some Page</a></li>
  <li><a href="somepage.html>Some Page</a></li>
</ul>
</div>

<强> CSS

#header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#header li{
    padding: 0 20px;
    display: inline;
}

#header li.spacer{
    width:10%
}

Answer 3

这只是一个正确构造div的案例，正如Holle所指出的，这是一个对象列表而不是一张海报。我认为你在定位中遇到的主要问题是你的html中的基础结构不利于操作。

我建议每个部分都有一个容器div，然后是其中的div或其他内容。即。

<div id="headerContainer">
    <h1>Title</h1>
    <img id="logo" src="myImagePath">
</div>
<div id="navigation">
        <!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
        <!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>

我希望如果您需要建议，请查看DevTips youTube频道，他非常擅长在构建网站时解释设计和构建阶段。

另外，在定位方面，请查看flexbox froggy（google it），请注意，在您加入之前，浏览器支持并不是很棒。

干杯，詹姆斯

在div中定位元素

3 个答案: