Question

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

这是迄今为止我所拥有的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个参数（top，right，bottom，left）或1个完成所有参数。如果您想要定位一侧，请使用正确的语法。

E.g。

margin: 0 10px;

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

Answer 2

您已经根据自己的意愿努力弯曲此页面，但我认为通过CSS定位和HTML最佳实践的一些教程会很有帮助。这是对CSS布局的一个很好的介绍。 http://learnlayout.com/

我绝不是专家，但这是我如何处理这种布局的一个例子。

CodePen Example

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

从float: left

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

Answer 4

您的负边距正在使文字向上，并允许以下文字重叠图像的边框。

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

See updated fiddle

文字重叠的响应式图片边框

4 个答案: