Html 文本重叠响应图像边框_Html_Css_Responsive Design

Html 文本重叠响应图像边框

html css responsive-design

Html 文本重叠响应图像边框,html,css,responsive-design,Html,Css,Responsive Design,我用固定的页眉、页脚和中间部分制作了这个页面，在中间部分，一个大的图像总是根据窗口的大小进行调整。如果有足够的空间，我试着在大图像的右侧有图像描述、几个按钮和另一个小图像。如果没有足够的空间，那么我想把这些物品一个一个地放在大图片下面。我可以通过创建一个包含项目的表并将其放在代码中的大图像之后来实现它。我为桌子设置了200像素的最小宽度，这样它就不会太瘦了。我的问题发生在桌子掉到下面的时候。其中的文本与大图像的边框重叠，我希望避免这种情况。最简单的解决方案是在描述文本前面添加“br”标记，但我不

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

这是到目前为止我所拥有的所有东西的清单。请移动侧边框使其更宽/更薄，以查看页面如何响应。谢谢你的帮助

HTML

编辑：

它看起来像是利润：-10px 10px 0px-10px；这是解决办法，但看起来我还是有点问题。我直到现在才注意到这一点，因为我使用的是Firefox浏览器，而Firefox是唯一一款没有这个问题的浏览器。但是我刚刚检查了Chrome，即Opera，他们有一个问题。当我使用填充页眉和页脚之间所有高度的大图像，并且表格显示在其右侧时，就会发生这种情况。我使用了边距：-10px 10px 0px-10px；在大图像上。在大图像下方有一个空间，在不需要时会出现一个垂直滚动条。我将其设置为在必要时显示在#main div上。但是在本例中，正是大图像下方的小空间使其过早出现。Firefox不知何故知道忽略这个空间，并且不显示滚动条，但所有其他浏览器都会显示滚动条，这使得页面看起来不那么好。请查看此图，并确保加宽窗口，使表格移到大图像的右侧。如果可以，请检查它在Firefox和其他浏览器中的外观，如果您有相同的问题，请告诉我。有没有办法消除大图像下方的小空间？我知道的唯一方法是在底部使用-10px的边距，但这让我们回到了原来的问题。

罪魁祸首是你在照片周围添加了一个负边距，这样当它折叠时，它会在底部给它一个-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个参数来执行所有操作。如果您想针对某一方，请使用正确的语法

例如

请参阅：

从

#photo
中删除浮动：左
或添加页边距底部：10px
负页边距会将文本向上移动，并允许以下文本与图像边框重叠
将margin属性更改为：margin:-10px 10px 0-10px
（顶部、右侧、底部、左侧）
您已经做出了巨大的努力，使本页面符合您的意愿，但我认为，阅读一些有关CSS定位和HTML最佳实践的教程会有所帮助。
这是对CSS布局的一个很好的介绍
我绝对不是一个专家，但这里有一个我如何处理这个布局的例子

HTML
你能试着去掉照片上的底边空白吗？（即，页边距底部：0；
）--请参见更新的fiddle（），这应该是一个单独的问题-这是一个不同的问题，不是初始问题的要求。你可以问一个新问题，如果你只删除float:left
文本仍然与图像的边框重叠。。。你试过这个吗？JSFIDLE，试一下。我不知道剩下的浮动在那里做什么，但利润率底部：10px；应该可以，谢谢。这正是我所需要的。看起来仍然有一个问题，我添加了一个编辑来描述它。有什么想法吗？@tanbox这应该是一个单独的问题-这是一个不同的问题（问一个新问题，让我知道，我会在这段时间内进行调查）@tanbox最初查看它表明#photo
上的填充是罪魁祸首-将其更改为填充：5px取消滚动，但会影响图片周围的边框。看起来是时候调整一下布局了。这很有趣，我会努力让它工作。如果我弄明白了，我会告诉你的。如果我不能，我将开始一个新问题。你是对的，你已经回答了我原来的问题，我将把它标记为已回答。我试着投你一票，但我还没有足够的声望让我的选票出现。希望很快：）谢谢你。我肯定有一些书要读。我喜欢你的布局，但是主图像在我的屏幕上看起来很小。其想法是使图像在任何屏幕上都充满页眉和页脚之间的整个高度。有没有一种方法可以调整你的布局，让它以这种方式工作？事实上，我在我的布局上做到了，没有任何问题，但后来我想添加一个边框，这给我带来了麻烦。明白了。我不知道如何在不产生一些奇怪的副作用的情况下将图像保持在100%高度，但我调整了我的示例，使内容换行的断点位于更大的最大宽度，并调整了一些间距以使图像更大。再次查看上面的示例链接以获取更新的布局。
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;
}

#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: 0 10px;

<!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>

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;
  }
}