问题标签 [fluid-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 - 使列向下流动到最小宽度,然后向下推动浮动侧边栏
假设您有两个 div:一个具有流体宽度和最小宽度,另一个 div 向右浮动。例如,jsbin.com 上的这个现场演示(带代码)有:
如果您调整浏览器的大小并使其变窄,则流体 div 会相应调整,直到达到最小宽度。之后,如果进一步缩小窗口,就会出现水平滚动条,右侧浮动 div 开始溢出,隐藏在窗口右侧。
我想要的是,如果用户不断缩小窗口,在非浮动 div 达到最小宽度后,浏览器应该将浮动侧边栏 div 推到非浮动内容下方,而不是溢出(隐藏)到正确的。那可能吗?
html - css流体布局图像问题
好的,我正在制作一个有两侧的布局。左边是 30%,右边是 70%。我有一个宽屏显示器,所以所有的图像都将显示我想要的方式,并且还有足够的空间。但是在较低的分辨率和最常见的 1024x768 上,我制作的图像对于左侧来说太大了,并且超出了右侧的边界。我如何使图像自动调整大小以适应较小的分辨率?
CSS
html - 3列流体布局css
好的,我正在尝试制作 3 列布局,但我希望所有列都具有 33% 的宽度和 50% 的高度。我还想在列的 3 个 div 上填充。但是每次我添加填充时,它都会使最后一个 div 转到下一行。
我怎样才能解决这个问题??
html
css
html - 具有百分比宽度的 html 元素需要具有其内部静态内容的最小宽度
具有百分比宽度的 html 元素需要具有其内部静态内容的最小宽度
您好,我正在尝试创建一个流畅/响应式布局。有没有办法强制具有百分比宽度的 html 元素具有其内部内容的最小宽度?也就是说,如果它的内部内容有某种静态宽度,比如 200px?
这是一个例子: http: //www.nathanielkessler.com/div/csshelp.html
如果在 IE9 中将其设置为 Quirks 模式并调整窗口大小,它的行为与我想要的完全一样。(注意当屏幕向内调整大小时,右侧的第二个 div 是如何弹出到左侧的第一个 div 之下的)。
如果您将文档设置回 IE9 标准模式,然后向内调整大小,您会看到外部红色边框 div 不尊重其内部内容(黄色框)。我只是继续缩小超出它的边界。
有没有办法让它像在怪癖模式下一样?(没有 JavaScript)
css - 居中对齐的 div 实际上不是居中
好吧,我有一个 div 嵌套在另一个 div 中,内部 div 以 80% 的宽度居中。但它没有完全居中。
我如何使它完全居中?
http://postimage.org/image/15linq5yc/
html
css
html - 同一元素上的相对宽度和填充
为了使我的网站更具响应性,我正在尝试学习如何流畅地定义元素。今天我遇到了一个我终于修复的情况,但我不明白为什么修复工作,我想。
我无法链接到该网站 (NDA),但我已经提供了一些包含相关元素的示例页面:
错误:http ://cruxwire.com/wrong.html 正确:http://cruxwire.com/right.html
我所拥有的是向左浮动的三个 div。我正在尝试向它们添加填充(以百分比形式)并使用 target/context=result,然后使用 *100(因为它是百分比。)
我的 Ethan Marcotte 的响应式网页设计副本说:“在元素上设置灵活填充时,您的上下文是元素本身的宽度。” 我给了 div 的 20% 的宽度。由于父元素是945px,所以每个div的像素宽度是189px。我想添加 20px 的填充,所以 20/189=0.1058201058201058。我为每个 10.58201058201058% 的 div 添加了一个填充。
这最终为每个 div 提供了 100 像素的填充,而不是 20 像素。我最终意识到填充是根据父元素的宽度计算的,而不是 div 本身。
我的解决方案是在每个现有的 div 周围放置一个额外的 div,这样我就可以将宽度应用于一个,将填充应用于另一个,这样就解决了问题。
为什么填充计算相对于其父元素而不是其自身元素?
我怎样才能做到这一点而不必添加额外的 div?
你可以在这篇文章链接的页面上看到代码,我也在下面添加了它。
错误的:
正确的:
internet-explorer - 在 Internet Explorer 8 中围绕流体图像锚定标签
我在 Internet Explorer 8 中的流畅布局(使用最大宽度:100% 的图像)遇到了一些问题。当我想将锚标记包裹在灵活宽度的图像和边距、填充和边框周围时,问题就出现了参与其中。这比你想象的要难一些。
所以 HTML 大致是这样的:
和造型:
所以我所拥有的是一个流动的图像,被一个带有填充和边框的锚包围。
以上是好的,除非图像小于容器。在这种情况下,锚点的内边距和边框会超出图像(填充容器的整个宽度)。
因此,让我们尝试一些方法来强制锚点适合其内容:
好的,现在锚框没有比图片大,但是锚标签在 Firefox、Opera 和 IE8+ 中又回到了不灵活的状态。但它确实触发了 IE7 中的布局,因此已经处理好了。接下来:
现在锚点又灵活了,但是当图像开始缩小时,它比容器大12px。锚点根据图像计算宽度,然后添加边框和填充。出于某种原因,Chrome 和 Safari 不这样做。无论如何,备用盒子模型来救援:
现在它在 Firefox、Chrome、Safari、Opera、IE7、IE9 中按预期工作,但由于某种原因不能在 IE8 中工作。在那里,锚仍然延伸到容器之外。我有点不知道该怎么做,因为box-sizing: border-box
应该在 IE8 中得到支持。
我有一个 JSFiddle 页面可以隔离问题http://jsfiddle.net/3gkXU/22/
作为最后的手段,我可以使用 JavaScript 来检测锚是否大于其父元素,然后display: block
在人们不太可能调整浏览器大小的假设下切换它。我不反对,但这里有 CSS 解决方案吗?
css - CSS 列:宽度灵活灵活
2011 年,我被 2 列布局难住了。我感到惭愧。;)
挑战在于提出这个问题:
对于典型的 2 列布局,您将左列的边距设置为与右侧 div 的边距相等,这没什么大不了的。然而,这个特定示例中的变量是,我不知道在任何给定时间右侧的 div 有多宽(它基于会变化的文本行。
总之,我需要:
- 2列布局
- 两列都占据了整个宽度
- 右侧的列与其包含的文本一样宽
- 左侧的列与剩余空间一样宽
似乎我之前必须建造这个,但我很难过。
我对 CSS、JS 或 jQuery 解决方案持开放态度。
编辑:
实际上,我已经可以看到一个相当简单的 jQuery 解决方案。我可以抓取右侧 div 的渲染宽度,然后做一些数学运算,从父容器的宽度中减去该宽度,然后将左列的宽度设置为相同。如果没有干净的 CSS 选项,那将是我的后备计划。
html - 使用流体中心实现 3 列布局的正确方法是什么
我正在研究具有两个固定宽度侧边栏(左侧和右侧)和一个流体中心的 3 列布局。我关注了 A List Apart 的圣杯文章,虽然这在大多数浏览器中都可以正常工作,但我在 Internet Explorer 7+ 中遇到了一些问题。
IE 7+ 的问题实际上并不源于这种技术,而是源于页面以怪异模式呈现的事实。但是,如果我让它以符合标准的模式呈现,许多过时的元素会被替换,并且需要完全重写。
鉴于这篇文章是几年前的,这是关于这个主题的最新参考吗?还是我应该应用不同的技术?
任何有关执行此操作的最佳方法的见解将不胜感激。