我正在制作一个新的网页，作为学习HTML5的练习。不幸的是，我遇到了一个非常令人沮丧的问题。
我的页面有一个“topbar”标题元素，其中包含一个“h1”元素（页面标题）和两个“nav”元素。我希望“h1”元素出现在“topbar”的左侧。我希望“nav”元素出现在“topbar”的右侧。
导航元素“nav_secondary”包含两个链接“注册”和“登录”。这应该出现在“topbar”的右上角。 “nav_secondary”下方应显示包含一行导航链接的“nav_main”元素。
不幸的是，我的网站看起来都错了。导航元素一直位于顶部栏的左侧，并被推离屏幕。我花了几个小时改变CSS和谷歌搜索教程，但还没有找到解决方案。
以下是我页面上半部分的屏幕截图： top half of page displaying incorrectly
这是我希望它看起来像的模拟图像： top half of page displaying correctly mockup
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site Name - Page Title</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="fullscreen-bg"></div>
<header class="topbar">
<h1>Page Title</h1>
<nav class="nav_secondary">
<a href="register.html">Register</a>
<a href="signin.html">Sign in</a>
</nav>
<nav class="nav_main">
<a href="home">Home</a>
<a href="archive">Archive</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</nav>
</header>
<section class="bodycontainer">
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
</section>
</body>
</html>
这是我的CSS：
html {
height:100%;
}
body {
background: #000000;
color: #ffffff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
h1 {
font-size: 24px;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
background-attachment: scroll;
}
@media (min-width: 767px) {
.fullscreen-bg {
background: url('../img/background.jpg') center center / cover no-repeat;
}
}
.topbar {
background: #000000;
position: fixed;
display: block;
top: 0;
left: 0;
right: 0;
padding-left:50px;
border: none;
width: 100%;
height: 100px;
margin: none;
z-index: 999;
overflow: auto;
background: rgba(0, 0, 0, 0.85);
}
.topbar h1 {
float: left;
}
.nav_main {
float: right;
display: block;
margin-top: none;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 24px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_main a:link {
color: #ffffff;
}
.nav_main a:visited {
color: #ffffff;
}
.nav_main a:hover {
color: #C18E15;
}
.nav_secondary {
position: relative;
float: right;
display: block;
margin-top: 10px;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_secondary a:link {
color: #ffffff;
}
.nav_secondary a:visited {
color: #ffffff;
}
.nav_secondary a:hover {
color: #C18E15;
}
.bodycontainer {
padding-top: 100px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 0px;
display: block;
overflow: hidden;
margin: none;
}
.articlecontainer {
background: #000000;
padding-top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
display: block;
overflow: hidden;
float: left;
margin: 10px;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.85);
}
有谁知道我怎么能解决这个问题，所以看起来应该像我的模拟中所说的那样？请告诉我。
谢谢！
答案 0 :(得分：1)
您可以使用display:inline-block;执行以下操作：
将第一行标题放在一个div中。并向其display:inline-block;和第二行导航栏.nav_main和vertical-align:top;提供，并从width:100%删除navbar。
将两个导航栏都设为float:right然后右对齐。
html {
height:100%;
}
body {
background: #000000;
color: #ffffff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
h1 {
font-size: 24px;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
background-attachment: scroll;
}
@media (min-width: 767px) {
.fullscreen-bg {
background: url('../img/background.jpg') center center / cover no-repeat;
}
}
.topbar {
background: #000000;
position: fixed;
display: block;
top: 0;
left: 0;
right: 0;
padding-left:50px;
border: none;
width: 100%;
height: 100px;
margin: none;
z-index: 999;
overflow: auto;
background: rgba(0, 0, 0, 0.85);
}
.firstBar > h1 {
display: inline-block;
vertical-align: top;
}
.nav_main {
float: right;
display: block;
margin-top: none;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 24px;
float: right;
height: 50px;
clear: both;
overflow: auto;
}
.nav_main a:link {
color: #ffffff;
}
.nav_main a:visited {
color: #ffffff;
}
.nav_main a:hover {
color: #C18E15;
}
.nav_secondary {
position: relative;
float: right;
display: block;
margin-top: 10px;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
display: inline-block;
vertical-align: top;
height: 50px;
clear: both;
overflow: auto;
}
.nav_secondary a:link {
color: #ffffff;
}
.nav_secondary a:visited {
color: #ffffff;
}
.nav_secondary a:hover {
color: #C18E15;
}
.bodycontainer {
padding-top: 100px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 0px;
display: block;
overflow: hidden;
margin: none;
}
.articlecontainer {
background: #000000;
padding-top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
display: block;
overflow: hidden;
float: left;
margin: 10px;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.85);
} <div class="fullscreen-bg"></div>
<header class="topbar">
<div class="firstBar">
<h1>Page Title</h1>
<nav class="nav_secondary">
<a href="register.html">Register</a>
<a href="signin.html">Sign in</a>
</nav>
</div>
<nav class="nav_main">
<a href="home">Home</a>
<a href="archive">Archive</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</nav>
</header>
<section class="bodycontainer">
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
</section>
答案 1 :(得分：0)
您可以使用左拉和右拉类：
<header class="topbar clearfix">
<nav class="nav_secondary pull-left">
</nav>
<nav class="nav_main pull-right">
</nav>
</header>
哎呀！你还没有使用过bootstrap。对不起，您可以使用css：
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.clearfix{
overflow:hidden;/*there's others way, I just used overflow technique here*/
}
您可能会看到this answer有关clearfix技术的进一步阅读：