gpt4 book ai didi

css - react 灵敏。在媒体查询、 float 问题和字体大小中使用 CSS 更改
显示顺序

转载 作者:太空宇宙 更新时间:2023-11-03 19:04:22 25 4
gpt4 key购买 nike

我正在处理这个页面:

http://www.analog.la/test/ret/index2.html

基本上有一个包含 5 的分区。它们向左浮动以垂直排列,但我在如何调整媒体查询中的 CSS 方面遇到了一些问题(一个用于 768,一个用于 480)。

如您所见,主要顺序为 Logo 、hex1、middle、hex2、hex3。

float 问题

对于 768,我非常希望有 Logo 和 hex1(居中),然后是 middle below(居中)以及 hex2 和 3(居中)。但是当我把浮子从中间移开时,它就被“从浮子方程式中移除了”,一切都变得很尴尬!所以我将它设置为没有 float ,但这将中间的 div 推得太低了,我不喜欢。任何提示将不胜感激!!

显示顺序

对于 480 及更低版本,我真的很想改变分区的顺序,这样我就可以获得 Logo ,然后是“中间”部分,然后是十六进制链接,但我不知道如何更改顺序通过 CSS。我在这里看到了一个类似的线程 - 但是这个人使用了提供的网格,我只是自己把它放在一起所以它似乎不适用。

字体大小

只是想知道是否有字体大小(用于标题)响应页面宽度?这不是真正的高优先级,但很高兴知道!

非常感谢。

最佳答案

对于花车:尝试使您的 .links1 和 .links2 div 宽度为 100%,并向它们添加 css clearfix 以清除 float 。这可能会解决 .preorder div 的格式问题。要使六边形居中,您也可以尝试向 .links1 和 .links2 div 添加 text-align:center 规则。

这是一篇来自 chris Coyner 网站的关于 clearfix 的文章:http://css-tricks.com/snippets/css/clear-fix/

对于字体大小:如果您想随着窗口大小的调整逐渐更改它,请查看 fitText:http://fittextjs.com/ -- 它需要一些调整才能很好地工作,但看起来这就是您要寻找的效果。

此外,看起来您可能需要对 .container div 进行 clearfix

关于css - react 灵敏。在媒体查询、 float 问题和字体大小中使用 CSS 更改 <div> 显示顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10870996/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com