我正在尝试构建一个简单的网页。它的左上角有一个标志，在同一行的右边是一个导航栏。一切正常。问题是我想在 Logo 和导航栏(全宽)下方放置文本。无论我尝试什么，文本都与 Logo 和导航栏在同一行开始。如何强制文本从 Logo 和导航栏下方开始？
这是 html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#" style="color:black;">Home</a></li>
<li><a href="Temp_AboutUs.html" style="color:black;">About Us</a></li>
<li><a href="Temp_Careers.html" style="color:black;">Careers</a></li>
<li><a href="Temp_ContactUs.html" style="color:black;">Contact Us</a></li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
这是CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
最佳答案
尽可能多地为容器提供 margin-top 以适应标题高度，并为 .logo 类提供 top:0px css。
.container {
width: 1170px;
margin-top: 100px;
}
.logo{
position: fixed;
z-index: 2000;
top: 0px;
}
关于html - 如何让我的网页文本位于我的 Logo 和导航栏下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47307062/