Question

我是CSS和HTML的新手，遇到了以下问题。我创建了一个横幅，用于保存图像并根据屏幕大小调整大小。现在，我希望我的内容根据图像调整大小。这种情况下的内容是一个表。当我减小屏幕尺寸时，桌子向上移动（填充减少），当我增加屏幕尺寸时，内容向下移动。这可能是因为图像尺寸发生了变化。你知道我怎么能相应地调整桌子大小吗？

这是HTML代码

<div class= "resize">
    <%=link_to image_tag("header.png"), "#" %>
  </div>
<div class="table-container">
<h3>Latest Postings</h3>
<table class = "table table-striped table-bordered table-centered">
  <tr>
    <th class="description">Description</th>
    <th class="location">Location</th>
  </tr>
  <td>[description]</td>
  <td>[Location]</td>
</table>
</div>

和CSS代码 / * table * /

.table-container {
  padding-top: 45%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}

/ *调整容器大小* /

  .resize {
   position: absolute;
   left: 0;
   right: 0;
    margin-top: 80px;
     padding-bottom: 80px;
    background-size: 100%;

}

/ *调整图片大小* /

.resize img {
    width: 100%;
    height: 100%;
}

谢谢

Answer 1

表格正在上下移动，因为填充是百分比，图像在调整大小时会缩小。在浏览器调整大小时，可以自然地看到内容向下移动。

您的图像不需要绝对定位，并为自己创造空间。这有帮助吗？请在此处查看我的代码：

http://jsfiddle.net/38Gba/

.table-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}
.resize {
    margin-top: 80px;
    padding-bottom: 80px;

}
.resize img {
    width: 100%;
    height: 100%;
}

根据图像大小调整div大小

1 个答案: