避免底部滚动条

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

截图附

来源

2017-10-13 Cameron Hickey

这可以帮助你：https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of -different-height-and-width-the-same-via-css –

你可以设置图像大小的百分比，而不是像素。 – tipsfedora

有一对夫妇的好办法，使这样的响应屏幕大小的网页。我将描述他们两个，但同样，还有更多：

制作表格的宽度的页面宽度
外部样式库，匹配诸如引导

制作的表宽度匹配页面宽度

首先，您需要确保页面本身具有样式位置：相对位置 - 以便它的任何子项（包括您的表格）可以相对于它定位或调整大小。有一些方法可以用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; 
}

现在，你可以把你的班表元素，它应该映射到页面大小！请记住，如果你的图片不按他们的父母<td>的大小，调整大小，那么他们可能会重叠或者有其他不希望的行为。

使用引导

所以，如果你有兴趣使用现有的框架来组织你的HTML e在网页上留言，我强烈推荐Bootstrap。 Bootstrap为您提供了许多预定义的类，这些类具有可用于制作动态网站的一致且可预测的结构。在一般情况下，引导结构包括三个主要类别：

容器
行
列

这其实很类似于一个HTML表工作 - 但它通过采用动态调整大小考虑设计。

你可以找到完整的文档和例子在这里使用引导：Bootstrap Docs

来源

2017-10-13 23:50:17

避免底部滚动条

回答

相关问题