我正在设计一个带有导航栏的网站，后面是两列。由于某些原因，导航栏显示在顶部，左侧和右侧，尽管我没有添加任何这些属性。
导航栏和两列应该具有相同的宽度，当前情况并非如此：
@font-face {
font-family: 'Open Sans', sans-serif;
src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('woff');
}
html {
min-height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
.nav {
background-color: rgba(0, 0, 0, 0.75);
height: 50px;
width: 100%;
}
.nav a {
float: left;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
font-size: 17px;
margin: 0;
}
.nav a:hover {
text-shadow: 0px 0px 20px #ffffff;
}
.nav a:active {
color: black;
}
.nav-right {
float: right;
}
.nav img {
float: left;
width: 40px;
height: 40px;
line-height: 4em;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
width: 100%;
}
#hero-image {
max-width: 50vw;
} <!DOCTYPE html>
<html lang="en" class="home">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav">
<a href="/">Title</a>
<div class="nav-right">
<a href="/">Link</a>
<a href="/explore">Link</a>
</div>
</div>
<div class="row">
<div class="column">
1
</div>
<div class="column">
<img src="https://i.imgur.com/raVKyuB.jpg" id="hero-image" alt="Attraction">
</div>
</div>
<footer>
<p>Copyright © 2019</p>
</footer>
</body>
</html>最佳答案
我更新了您的样式，使之成为符合当今标准的正确CSS编码。 Flex布局，描述性HTML5标记等。您可以在代码中找到更多注释。
@font-face {
font-family: 'Open Sans', sans-serif;
src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('woff');
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
}
nav {
background-color: rgba(0, 0, 0, 0.75);
width: 100%;
display: flex;
}
nav > div {
padding: 1rem 0px; /* typical for distances */
box-sizing: border-box; /* count padding into width, important for flex children */
}
nav > .left {
flex: 1 1 auto; /* automatically fill out any empty space */
}
nav a {
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
margin: 0;
padding: 1rem; /* typical for distances */
}
nav a:hover {
text-shadow: 0px 0px 20px #ffffff;
}
nav a:active {
color: black;
}
section {
display: flex;
}
.column {
min-height: 50vh;
padding: 1rem; /* typical for distances */
flex-basis: 50%;
box-sizing: border-box; /* count padding into width, important for flex children */
}
.column.right { /* placing the image as a background for easier adaptation to different screen widths */
background-image: url('https://i.imgur.com/raVKyuB.jpg');
background-position: center center;
background-size: cover;
}<!DOCTYPE html>
<html lang="en" class="home">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="nav">
<div class="left">
<a href="/">Title</a>
</div>
<div class="right">
<a href="/">Link</a>
<a href="/explore">Link</a>
</div>
</nav>
<section>
<div class="left column">
1
</div>
<div class="right column">
</div>
</section>
<footer>
<p>Copyright © 2019</p>
</footer>
</body>
</html>