以下是我使用的CSS:
img {
max-width: 100%;
height: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}

<ul class="nav">
<li><a href="#">PAGE 1</a>
</li>
<li><a href="#">PAGE 2</a>
</li>
<li><a href="#">PAGE 3</a>
</li>
<li><a href="#">PAGE 4</a>
</li>
<li><a href="#">PAGE 5</a>
</li>
<li><a href="#">PAGE 6</a>
</li>
<li><a href="#">PAGE 7</a>
</li>
<li><a href="#">PAGE 8</a>
</li>
<li><a href="#">PAGE 9</a>
</li>
</ul>
<img src="http://i.stack.imgur.com/71Rqx.jpg" alt="banner">
</img>
&#13;
所以问题是图像落在我的导航栏后面。这是原始2图片。
答案 0 :(得分:0)
由于导航固定在左侧,因此您的图像会落后。你可以做几件事来解决这个问题。首先,你周围的div为内容形成图像并加上边距(例如下面的例子)。其次,你可以使导航绝对,所以图像不会落后于它。
HTML
<div class='content'>
<img src="banner.jpg" alt="banner" />
</div>
CSS
.content {
margin-left:15%;
}