文本重叠的响应图像边框

Question

我用固定的页眉，页脚和中间部分制作了此页面，在该部分中，大图像始终会根据窗口的大小进行调整。 如果有足够的空间，我将尝试在大图像的右侧显示图像说明，几个按钮和另一个小图像。 如果没有足够的空间，那么我希望这些项目都落在大图像之下。 我可以通过创建一个包含项目的表格并将其放置在代码中的大图像之后来实现这一目标。 我为表设置了200px的最小宽度，只是它不会变得太瘦。 当表格跌落到下面时，我的问题发生了。 其中的文本与大图像的边框重叠，我想避免这种情况。 最简单的解决方案是在描述文本的前面添加“ br”标签，但是我不喜欢该表在右侧显示时的外观，因此这对我不起作用。 也许有更好的方法可以一起完成这些任务。 顺便说一下，大图像上的边框是通过使用边距和填充而不是实际边框来构成的。 我试图在边境上做同样的事情。

这是到目前为止我所拥有的一切的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的边距，但这使我们回到了原来的问题。

Answer 1

罪魁祸首是您在照片周围添加了负边距，以便当照片合拢时，它会在底部给它一个-10px的边距，从而迫使文本重叠。

您的代码：

#photo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  float: left;
  background: #d0a382;
  padding: 10px;

  /* this is your culprit */
  /* margin: -10px; */

  margin-right: 10px;
}

margin属性接受4个参数（上，右，下，左）或1个参数。 如果要瞄准侧面，请使用正确的语法。

例如

margin: 0 10px;

请参阅： http ： //www.w3schools.com/css/css_margin.asp

Answer 2

您已经竭尽全力地按照自己的意愿来弯曲此页面，但是我认为阅读一些有关CSS定位和HTML最佳做法的教程会有所帮助。 这是CSS布局的不错的介绍。 http://learnlayout.com/

我绝不是专家，但是这里有一个示例说明如何处理此布局。

CodePen示例

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" media="screen">
  </head>

  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>

      <main>
        <section class="left-column">
          <img class="full-image" src="http://s33.postimg.org/5dvnxclpr/tmto1.jpg">
        </section>

        <section class="right-column">
          <p>
            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
          </p>
          <ul>
            <li><a href="">Prev</a></li>
            <li><a href="">Next</a></li>
            <li><a href="">Zoom</a></li>
          </ul>
          <img src="http://s33.postimg.org/8fdpz710v/tmto2.jpg" id="nextphoto">
        </section>
      </main>
      <footer><h3>Footer</h3></footer>
    </div>
  </body>
</html>

CSS

body {
  background-color: #f0ceb5;
}

p {
  margin: 0;
}    

a {
  font-family: Arial, sans-serif;
}    

ul {
  margin: 20px 0;
  padding: 0;
}

ul li {
  display: inline;
  list-style: none;
  margin-right: 5px;
}
ul li:last-child {
  margin-right: 0;
}

ul li a {
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background: #d0a382;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.left-column, .right-column {
  display: inline-block;
}
.left-column {
  width: 60%;
  margin-right: 5%;
  vertical-align: top;
}
.right-column {
  width: 33%;
}

.full-image {
  max-width: 100%;
  border: 10px solid #d0a382;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .left-column, .right-column {
    display: block;
    width: 100%;
  }
  .left-column {
    margin-right: 0;
  }
  .right-column {
    margin-top: 25px;
  }
} 

Answer 3

从#photo移除float: left或添加margin-bottom: 10px

Answer 4

您的负边距使文本出现，并允许以下文本与图像的边框重叠。

将margin属性更改为： margin: -10px 10px 0 -10px; （上，右，下，左）

查看更新的小提琴