如何使事物在自适应布局中对齐

Posted 2023-03-15

【中文标题】如何使事物在自适应布局中对齐

【英文标题】：How can I keep things aligned in an adaptive layout

【发布时间】：2015-05-08 13:28:23

【问题描述】：

我正在使用 CSS 构建一个自适应设计，我想知道如何才能使事物保持良好的对齐。到目前为止的两个例子：我的页面：http://www.spabc.com/drupal/ 现在，我想在浏览器窗口调整大小时保持check-rates_btn 与titleimg 对齐，但由于图像被设置为width 的95%，我不能真正让事情保持一致。我还想让logo 与图像很好地对齐，即它悬挂在titleimg 上的位置，我想保持它悬挂的房间= 到右侧到@987654329 边界的距离@。我试图描述我在这里的意思：用红线描绘的距离应该保持相等。我该怎么做？

【问题讨论】：

有很多方法，你只需要学习一些基本的 html & CSS。您可以将图像放入容器中，然后将徽标放入同一容器中并调整位置。

【参考方案1】：

您需要使用CSS Media Queries 相应地调整check-rates_btn 和titleimg 的样式。

不幸的是，您正在使用 Drupal 并且有太多缓存的 CSS 文件供我查看，但我确实查看的那些（layout.css 和 system.theme.css）只有一些特定的媒体查询没有改变这些类。

希望这会有所帮助。

【讨论】：

所以你说我基本上需要“重新调整”我的布局，因为屏幕以不同的@media“步骤”缩小。这是真的吗？ layout.css 和 style.css 包含上述元素的定义。

@cerr，是的，这是正确的。根据屏幕的大小，您可以为元素分配不同的样式，以使它们以您希望的方式做出反应。 layout.css 中已经有一些媒体查询，您可以将其用作示例。