【问题标题】:How do I align the columns in CSS flexbox? [closed]如何对齐 CSS flexbox 中的列? [关闭]
【发布时间】:2017-05-19 10:54:03
【问题描述】:

我的天气应用的布局有两个问题

  1. 底部和右侧边缘周围的空白区域
  2. 我不知道如何将工作日与其下方的 5 个红色框列对齐,这样它们就在我这边

我正在采用移动优先的方法,因此您需要使用手机屏幕尺寸在开发控制台中查看它,因为我尚未添加媒体查询。

https://lettda.github.io/WeatherWiz/

【问题讨论】:

  • 寻求调试帮助的问题(“为什么这段代码不起作用?”)必须包括所需的行为、特定问题或错误在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅:How to create a Minimal, Complete, and Verifiable example
  • @PraveenKumar 1) 这不能回答我的问题,也无济于事 2) 我明确表示我希望它们并排 3) 为了了解我在看什么视觉是不需要我的 HTML 和整个样式表
  • 需要minimal reproducible example 的原因是我们想提供帮助。如果我们不必重新创建复制问题所需的任何代码,那么提供帮助会要容易得多。这是您已经拥有的代码。因此,请帮助我们帮助您并提供一个完整的 minimal reproducible example 来复制此类问题的问题。如果没有minimal reproducible example,甚至开始帮助您所需的努力量要高得多,这显着减少了愿意/能够帮助您的人数。即使我们付出了额外的努力,我们也必须猜测您可能遇到的问题的很大一部分。
  • @mayken 把我得到的最有帮助的答案传下来!感谢您提出观点并解释为什么有必要。我意识到这是我已经编写并主演了一段时间的代码,我会自动理解这些片段适合的位置,但你们都没有

标签: html css twitter-bootstrap-3 flexbox


【解决方案1】:
  • 打开.footer 设置bottom: -1px;(它会粘在底部)
  • .col-xs-6 类添加到#weekDay(它将使用半个 12 列网格)
  • 将另一个.col-xs-6 添加到#weekly_forecast(它将使用 12 列网格的另一半)
  • line-height: 140px; 添加到h2 使其与红色divs 垂直对齐。
  • 对于更大的width 视口,使用col-md-*s 复制相同的公式

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-09
    • 1970-01-01
    • 2020-09-16
    相关资源
    最近更新 更多