html - 如何使我的网页的这一部分响应?

标签 html css layout responsive-design

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 6 年前

这是我创建的页面的链接:https://thawing-savannah-89995.herokuapp.com/ 这是我在没有帮助的情况下仅使用 PSD 制作的第一个网页。

这是我遇到问题的区域的 SS,当我缩小浏览器大小时,它一直在中断。这种布局对我来说很难想通,而且我认为不应该这样。我怎样才能更好地为该部分设计 html 和 CSS?

enter image description here

最佳答案

在发表这篇文章时,我没有足够的代表发表评论。抱歉,如果可以的话我会的。

我建议在 css 中使用一个叫做 flexbox 的东西。它需要一些额外的工作,而不是 Bootstrap 或 960 或其他东西,但结合百分比单位,甚至可能 vh/vw 如果你想成为新时代。

This guide解释得比我希望的要好;基本上,它是一个动态对齐系统。与替代方案相比,居中变得微不足道。请记住,您可能需要一些@media 断点,主要用于更改flex-direction

最近获得了almost (对不起 IE)通用浏览器支持。如果您确实关心 IE,请使用类似 flexibility 的垫片.

如果您确实想使用类似 Bootstrap 的网格系统,则有更好的 alternatives ,如果你想调查它们。我个人不是 bootstrap 的粉丝(不再......),但我想无论什么漂浮在你的船上。

关于html - 如何使我的网页的这一部分响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39985917/

上一篇:javascript - 如何在 Javascript 中将文本文件中的段落作为单个字符串读取?

下一篇:css - 文本扩展页面边界后无法获得相等的列高

相关文章:

android - 重构为 AndroidX 后布局预览不起作用

php - 在提交表单上使用 PHP 中的 echo 将数据显示到表中

javascript - 通过索引值从数组中删除项目

javascript - 从右到左增加或增加 div 标签的宽度

CSS 定位图像在彼此之上并制作中心栏

html - 这种响应式布局可以使用 Flexbox CSS 吗?

javascript - 如何构造一个正则表达式来分割这段文字?

css - 让 &lt;iframe&gt; 随着元素的增长而增长,而不是在纯 CSS 上重叠

jquery - 将 XML 数据注入(inject) HTML 表

Android:如何使 View 的背景不可见?