请查看www.google.com 在那里，我的页脚左侧是广告，商务和关于，隐私，设置< / em>，条款 ..等位于页面底部的右侧。
我是新手太开发者我正在尝试使用html和css开发相同的google页面，没有任何功能。
这是我的Html页面代码
selector {
property: value;
}
h3 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 180px;
border: 0;
}
h4 {
text-decoration: underline;
position: absolute;
top: 10px;
right: 120px;
border: 0;
}
.ribbon {
position: absolute;
top: -160px;
right: -560px;
width: 25px;
}
img {
position: fixed;
width: 300px;
top: 40%;
bottom: 60%;
left: 40%;
margin: auto;
}
a {
position: relative;
margin-top: 400px;
background: no-repeat left;
font-size: 12px;
left: 500px;
}
.venu {
width: 150px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: 2.png;
padding: 20px 20px 20px 45%;
position: fixed;
top: 55%;
bottom: 60%;
left: 30%;
margin: auto;
}
p {
position: fixed;
top: 75%;
bottom: 60%;
left: 30%;
margin: auto;
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
}
.left {
float: left;
left: -800px;
}
.right {
float: right;
text-align: right;
}
.button {
background-color: blue;
border: none;
color: white;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 2px;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
border: 0;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="2.css" />
<title>Google</title>
<style>
a:link,
a:visited {
background-color: #e0e0e0;
color: #696969;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div id="content">
<img src="22.png" class="ribbon" />
</div>
<button class="button">Sign in</button>
<h3>Gmail</h3>
<h4>Images</h4>
<img src="download.png" />
<input type="text" class="venu">
<p>Google.co.in offered in: English Hindi Tamil Telugu Kanada Malayalam</p>
<div id="footer">
<h4 class="left">Advertising Business About</h4>
<h4 class="right">Privacy Terms Settings Use Google.com</h4>
<div style="clear: both"></div>
</div>
<a href="" target="www.Google.com">Google Search</a>
<a href="" target="www.Google.com">I'm Feeling Lucky</a>
</body>
</html>
如果有任何我遗漏的内容，请告诉我。
答案 0 :(得分：0)
制作两个div，例如leftDiv和rightDiv。 在左侧Div中，输入所需元素列表。 为正确的div做同样的事。
.leftDiv{
float:left;
}
.rightDiv{
float:right;
}
答案 1 :(得分：0)
您可以使用<footer>设置页脚
在您的代码中，使用<h4>标记替换<div id="footer"></div>内的<footer>个标记。就像这样：
<div id="footer">
<footer>Advertising Business About</footer>
</div>
您还可以通过添加<div>代码来对齐页脚内容。
答案 2 :(得分：0)
看看他们的代码，我制作了类似他们的代码片段。将float: right放入元素。
body {
margin: 0;
padding: 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 0;
background-color: grey;
}
.content.left {
margin-left: 30px;
}
.content.right {
float: right;
margin-right: 30px;
}<footer>
<span class="content left">Some contents here</span>
<span class="content right">Some contents here</span>
</footer>