css - 在 Drupal 7 中使用 CSS 在递归 div 中居中可调整大小的图像

标签 css drupal-7 css-float drupal-theming html

我正在为我创建的 Drupal 7 中的图片库设置主题,用户通过它上传多张图片,结果在页面上看到图片列表。

我使用响应式图像和样式模块,因此图像没有固定大小。我想要的效果是这些图像排成一行并且始终居中,它们之间的间距/间距宽度相等,无论浏览器大小如何调整。所以添加媒体查询最终结果将是一个单栏页面,一个图像在另一个顶部,在 iPhone 视口(viewport)和三四栏页面中,图像并排放置在桌面屏幕上。

复杂的部分是 Drupal 有太多的 div,一个又一个,我不确定我是否按照正确的步骤来实现这种效果。尽管它可能很简单,但这些递归 div 却成了问题。

因此,如果有人可以指导我完成这些 div 并帮助我弄清楚如何实现这种对齐,我将非常感激。每个回复对我都很重要,所以不要犹豫,提出各种意见和解决方案。

提前致谢!

最佳答案

我个人不了解 Drupal,但正如我在 joomla 和 wordpress 中所经历的那样,最好的方法是为每个设备设置一个响应式布局,或者简单地使用一个框架来为您完成。然后对于水平布局,直接转到页面结构中的图像,并为所有图像提供相同的高度和左边距或右边距。然后检查 img parent 没有任何破坏性的宽度和高度。 对于垂直布局,只需为宽度做这件事,并给它们 margin-bottomms 来制造间隙。
看起来很简单

关于css - 在 Drupal 7 中使用 CSS 在递归 div 中居中可调整大小的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14185820/

相关文章:

css - 如何使用 CSS 控制 SVG 线条动画的速度

html - 如何在网站中使用自定义字体

drupal - 如何使用drupal7中的推送通知模块?以及如何存储设备 token ?

php - 如何在 PHP 和 Azure 中调试curl

css - IE7 CSS float 问题

css - 使用 CSS float - 是否需要宽度?

css - 如何使用 Joomla 的 Protostar 模板调整内容到视口(viewport)的大小?

javascript - 将汉堡菜单和搜索框添加到导航菜单

css - 具有背景色的 float 元素周围的 block 元素

HTML 和 CSS。漏洞 : Appending 1px border when i make my scale more