【发布时间】：2016-06-01 23:34:18
【问题描述】：
我用固定的页眉、页脚和中间部分制作了这个页面，其中大图像总是调整到窗口的大小。如果有足够的空间，我会尝试在大图像的右侧添加图像描述、几个按钮和另一个小图像。如果没有足够的空间，那么我希望这些项目全部降到大图像之下。我能够通过创建一个包含项目的表格并将其放在我的代码中的大图像之后来实现它。我为表格设置了 200 像素的最小宽度，这样它就不会变得太窄。当表格下降到下方时，我的问题就会发生。其中的文字与大图像的边框重叠，我想避免它。最简单的解决方案是在描述文本前添加“br”标签，但我不喜欢表格显示在右侧时的样子，所以这对我不起作用。也许有更好的方法可以一起完成这一切。顺便说一下，大图上的边框是由margin和padding组成的，而不是实际的边框。我尝试使用边框进行此操作，但遇到了同样的问题。
这是我目前拥有的所有东西的JSFiddle。请移动侧边框使其更宽/更窄，以查看页面如何响应。感谢您的帮助。
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div id="header">Header</div>
<div id="main">
<img src="http://s33.postimg.org/5dvnxclpr/tmto1.jpg" id="photo">
<table>
<tr>
<td>
Description Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text
</td>
<tr>
<td>
<ul>
<li>
<a href="">Prev</a>
</li>
<li>
<a href="">Next</a>
</li>
<li>
<a href="">Zoom</a>
</li>
</ul>
</td>
<tr>
<td>
<img src="http://s33.postimg.org/8fdpz710v/tmto2.jpg" id="nextphoto">
</td>
</table>
</div>
<div id="footer">Footer</div>
</body>
</html>
CSS
body {
background: #f0ceb5;
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #000000;
}
img {
border: 0px;
}
#header {
position: fixed;
top: 0px;
width: 100%;
height: 60px;
line-height: 60px;
}
#main {
position: fixed;
top: 60px;
bottom: 30px;
left: 20px;
right: 20px;
padding: 10px;
overflow-y: auto;
}
#photo {
max-height: 100%;
max-width: 100%;
width: auto;
float: left;
background: #d0a382;
padding: 10px;
margin: -10px;
margin-right: 10px;
}
table {
margin: 0px;
padding: 0px;
min-width: 200px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
ul li {
display: block;
position: relative;
float: left;
}
ul li a {
display: block;
position: relative;
float: left;
padding: 10px;
white-space: nowrap;
margin: 10px;
margin-left: 0px;
font-family: Arial, sans-serif;
font-size: 16px;
color: #ffffff;
background: #d0a382;
}
#nextphoto {
margin-top: 10px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 30px;
line-height: 30px;
}
编辑：
看起来像边距：-10px 10px 0px -10px;是解决方案，但看起来我仍然有一些问题。直到现在我才注意到它，因为我正在使用 Firefox 浏览，这是唯一一个似乎没有这个问题的浏览器。但是我刚刚检查了 Chrome、IE、Opera，它们有问题。当我使用填充页眉和页脚之间所有高度的大图像并且表格显示在它的右侧时，就会发生这种情况。我使用了边距：-10px 10px 0px -10px；在大图上。大图像下方有一个空间，导致垂直滚动条在不需要时出现。我将它设置为在必要时出现在#main div 上。然而，在这种情况下，大图像下方的小空间使其过早出现。 Firefox 不知何故知道忽略该空间并且不显示滚动条，但所有其他浏览器都会这样做，并且它使页面看起来没有理由看起来不太好。请查看此JSFiddle 并确保扩大窗口，以便表格移动到大图像的右侧。如果可以，请检查它在 Firefox 和其他浏览器中的显示方式，如果您有同样的问题，请告诉我。有没有办法摆脱大图像下方的那个小空间？我知道的唯一方法是在底部使用 -10px 边距，但这让我们回到了最初的问题。
【问题讨论】：
-
您可以尝试删除
#photo上的负下边距吗？ （即margin-bottom: 0;）--查看更新的小提琴（jsfiddle.net/23au174g/1） -
这应该是一个单独的问题 - 这是一个不同的问题，不是最初问题的要求。您可以将其作为一个新问题提出，恕我直言
标签： html css responsive-design