Question

我在一张桌子里有3张图片，这是我弄清楚如何让它们彼此相邻的唯一方法。我遇到的问题是，在我使用的屏幕上，它们看起来像我希望它们在底部没有滚动条，但在其他尺寸屏幕上它们强制整个页面扩展，因此需要滚动才能看到页面的整个宽度。如何使外观响应，以使图像相对于其他所有图像保持相同的大小？

附加截图

Answer 1

有几种很好的方法可以像这样制作响应屏幕大小的网页。我将描述其中两个，但同样，还有更多：

使表格宽度与页面宽度相匹配
外部样式库，如Bootstrap

使表格宽度与页面宽度匹配

首先，您需要确保页面本身具有样式位置：相对于它 - 以便它的任何子项（包括您的表）可以相对于它定位或调整大小。使用css有几种方法可以做到这一点，但是如果你正在使用类，你可以将html中的所有标准高级元素分配到相对位置，并使其成为浏览器提供的全宽度。

html, body {
   position: relative;
   width: 100%;
   min-width: 100%;  //we do both width and min-width for compatability with old browsers
}

现在已经不在了，你有一个动态宽度的起点。如果表是<body>元素的直接子元素，那么您应该为它定义一个类，它也会给它一个100％的宽度。请记住，此宽度映射到它的父级宽度，因此<body>是整页宽度，因此表格也会尝试！如果你想在它周围添加一些空间（这样它就不会真正触及页面边缘，你也可以添加一些填充！

.fullWidthTable { 
   position: relative;
   width: 100%;
   min-width: 100%;
   padding-left: 20px;
   padding-right: 20px;
}

现在你可以将这个类放在你的table元素上，它应该映射到页面大小！请注意，如果您的图片没有根据<td>父母的大小重新调整大小，那么它们可能会重叠或出现其他不受欢迎的行为。

使用Bootstrap

因此，如果您对使用现有框架在网页上组织html元素感兴趣，我强烈建议您使用Bootstrap。 Bootstrap为您提供了许多预定义的类，这些类具有一致且可预测的结构，您可以使用它来创建动态网站。通常，bootstrap结构涉及三个主要类：

容器
行
列

它实际上与使用html表非常相似 - 但它需要通过设计考虑动态大小。

您可以在此处找到有关使用Bootstrap的完整文档和示例：Bootstrap Docs

避免底部滚动条

1 个答案: