问题标签 [liquid-layout]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSS - 如何使用未知高度的标题制作 100% 高度的 2 列布局
我需要完成主题,并且真的被卡住了。为了更好地描述,我放了一张我需要得到的图片:
起初我尝试用div
s 来做,但由于width
属性,它在 Firefox 中看起来完全不同。虽然我主要关心的是 IE8 非标准模式(这是必需的),但我希望它在 Firefox 中看起来或多或少得体。
然后我尝试用两列表格来做,它在 IE 中运行良好,在 Firefox 中运行良好,但由于某种原因,如果右列内容变得比屏幕宽,表格无法容纳并且我的内容被水平裁剪表,不显示滚动条。
另外,查看了 Stackoverflow 上的早期帖子,带有fixed
容器,但它似乎不适用于 IE8 非标准模式。
很高兴听到有关如何做到这一点的任何想法。
html - 缩小页面时的css3 min-max宽度
祝你有美好的一天。我正在处理一个网页,但我一直在定义最大和最小宽度。基本上,当像大多数网页一样缩小网页时,我希望我的页面居中。请需要专家帮助。尽快谢谢。
html - 如何使文本块与液体布局中的图像行具有相同的宽度?
我有一段文字,那是画廊的简历。
画廊有一个流动的布局,也就是说,你可以看到 4 张图片到 x 张图片,比如说 8 张图片,具体取决于屏幕宽度。
我的客户希望文本块与此布局的宽度完全相同,但正如您所料,图像会独立于文本块更改它们的行。
你能看到解决方案吗?这是代码,如果适合,您可以或多或少地更改它,重要的限制是它必须是液体设计:
css - 需要背景图像滚动但与固定左列和液体右列冲突
这是布局
http://timsegreto.com/cssmock/mock.html
我需要背景图像与右栏中的文本块滚动一致。我尝试了许多不同的方法,但没有成功。任何想法将不胜感激。不确定它是否可能或进行什么研究以使其发挥作用。
谢谢!
html - 自动拟合内容?
我想知道http://staffanstorp.se/如何具有流动内容的能力(我相信这是术语,如果我错了请纠正我)。我也会根据情况更改标签,以便其他人可以在人们有答案时找到这篇文章,因为我发现很难找到任何东西。
无论如何,我一直在寻找一个可能的 jquery 插件来为我做这件事。上面的网站正是我所需要的,非常感谢您的帮助:D
我能找到的唯一事情是对内容进行这种类型的自动调整大小,但仅限于文本,这个网站做了很多!
html - 浏览器不能缩放到 400 像素以下?
我正在整理一个液体样式表,效果很好。我注意到的一件事是,我在 Chrome 中的浏览器窗口不会调整到 400 像素以下,它只会卡在那里,而在 FF 中,当我缩小它时,它只会停在 400 像素左右,然后弹出一个水平滚动条。
当我在手机上打开网站时,它在 320 像素左右看起来很完美,所以我知道它的缩放比例确实低于 400 像素。
我很好奇是否有人知道这是否是浏览器/桌面的东西,或者我是否应该查看我的 CSS 以外的东西。我没有任何最小宽度声明,所以我不确定是什么原因造成的。
再次在桌面上,它缩小到大约 400 像素的最小宽度并停止,但是当我在手机上打开它时,它会缩放到大约 320 像素的手机屏幕大小......很好奇为什么至少它赢了不要缩小到桌面上的 320 像素。
-edit- 另外我不确定这是否重要,但 Opera 允许它缩小到几乎没有……所以它适用于 Opera,而不适用于 Chrome 或 FF……有什么想法吗?
css - 你什么时候选择流动的 CSS 布局而不是固定的?为什么?
我想知道您对 css 编码、何时/为什么编码固定或流动样式表有什么看法?
我同意固定大小的样式表更容易/更快地编写代码,因为液体需要更多时间才能使所有元素很好地适应它们的父元素。
那么,你什么时候选择液体而不是固定(反之亦然)?为什么?
html - CSS - 孩子不继承液体布局中父母的宽度
全部,
这似乎是与 Firefox 相关的问题(没有尝试过 Opera 和 IE)。
我有 'ul' 孩子,它们在液体布局中被赋予 100% 的宽度。父“li”本身的宽度是其父“ul”的 33%。
Chrome 似乎正确地显示了子 'ul' 的宽度,即它的 100% 等于它的父 'li' 宽度的 33%。但是,Firefox 会将 'ul' 子项的宽度拉伸到整个视口宽度。
jsfiddle:http: //jsfiddle.net/g4VAd/2/
CSS:
css - 基于流体/百分比的布局上未对齐的图像
我有这个代码: http: //jsfiddle.net/VV9qJ/但由于某种原因,我似乎无法修复由图像引起的小像素错误。基本上,您会注意到一些图像在其中一些周围有一个像素或两个白色间隙,而有些则没有,尤其是当您调整浏览器窗口的大小时。每个浏览器呈现白色间隙的方式也略有不同。
我的布局不能有任何间隙,所有内容都必须相互紧贴,包括浏览器窗口。
是否有一种万无一失的方法可以确保图像在不同浏览器中始终保持紧密贴合?也许是 jQuery?我已经做了很多谷歌搜索,但没有找到任何东西。
仍然没有找到解决此问题的方法。我很难相信没有解决方案,任何人都可以提供帮助吗?