【问题标题】:Adaptive html layout using only CSS仅使用 CSS 的自适应 html 布局
【发布时间】:2012-02-08 16:03:48
【问题描述】:

我认为这是我关于自适应 HTML/CSS 布局的第二篇文章。我在之前的帖子中得到了一个有用的答案,在那里我实现了自适应布局,在我需要移除浮动并将容器放在另一个下方的地方更直接。

这次我有一些什么复杂的设计。让我向设计展示它在横向和纵向模式下的外观。

景观设计:

在纵向模式下,如果宽度小于 1024px,那么设计应该是这样的

人像设计:!

如果有人指导我如何处理此设计,将会很有帮助。如果需要更多信息,请随时询问

谢谢 拉克斯

【问题讨论】:

  • 您能否提供更多关于 div 1-6 的属性和用途的信息?为什么它们在两种布局中的大小不同?你能用文字描述一下你希望它们如何定位,尤其是在纵向模式下。
  • 您好 RoToRa,我已经编辑了肖像设计,您可以查看一下。几乎所有 div 的大小都相同,但它们需要在纵向模式下按以下方式对齐。
  • 一些源代码会很有帮助。 :)
  • “几乎所有的 div”并没有真正的帮助。要么它们都需要相同的大小,要么您需要准确描述 div 可以具有的大小。此外,您还没有描述纵向布局。为什么 div5 右对齐而 div 6 居中,为什么只在纵向模式而不是横向模式?

标签: html css layout


【解决方案1】:

您可以尝试使用媒体查询

@media all and (max-width: 1023px) {
  /* CSS you need for portrait */
}

你可以阅读很多关于“响应式网页设计”的好文章。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-06
    • 2016-08-18
    • 2018-09-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多