避免底部滚动条
我在表格中有3张图片,这是我能弄清楚如何让它们彼此相邻的唯一方法。我遇到的问题是,在我使用的屏幕上,他们看起来像我希望他们在底部没有滚动条,但在其他大小的屏幕上,他们强制整个页面进行扩展,因此需要滚动才能看到整个页面的宽度。我怎样才能使外观响应,使图像保持相对于其他所有的相同大小?避免底部滚动条
截图附
有一对夫妇的好办法,使这样的响应屏幕大小的网页。我将描述他们两个,但同样,还有更多:
- 制作表格的宽度的页面宽度
- 外部样式库,匹配诸如引导
制作的表宽度匹配页面宽度
首先,您需要确保页面本身具有样式位置:相对位置 - 以便它的任何子项(包括您的表格)可以相对于它定位或调整大小。有一些方法可以用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
这可以帮助你:https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of -different-height-and-width-the-same-via-css –
你可以设置图像大小的百分比,而不是像素。 – tipsfedora