问题标签 [fluid-layout]

我有一个 html 输入。

输入有padding: 5px 10px;我希望它是父 div 宽度的 100%（这是流动的）。

但是使用width: 100%;导致输入是100% + 20px我如何解决这个问题？

例子

我在父 div 中有两个 div（并排），我希望右 div 占据 100% 的剩余空间（即 100% - 200px）并且应该始终保持在左 div 旁边（不低于左 div）：

我已经发现了几个类似的场景已经被问过了，但没有一个能解决这个特定的问题。我希望有人能帮忙！

连续三个div。中间的 div 居中，并有一个固定的宽度和高度。外部的两个 div 必须扩展以填充窗口边缘和中心 div 边缘之间的剩余空间。像这样：

http://kthornbloom.com/example.jpg

*注意-我想用 CSS 解决它，但如果需要 javascript，那没关系

*note2- 这样做的目的不是使中间 div 居中，我知道有更好的方法可以做到这一点。目的是设计使用背景元素的网站，该背景元素需要是页面的整个宽度，除了中间。

通常当我在容器 div 中有浮动元素时，我会有这样的东西：

我发现<div style="clear:both;"></div>在每一个流畅的布局上都有它非常烦人和丑陋。所以我尝试做这样的事情（使用css，但为简单起见）：

并没有工作。是否可以通过在课堂上添加一些东西来使其工作.container？

我有一个两列布局，其中右列的静态宽度为 350 像素，左列的宽度应该填满页面的其余部分。或者至少那是我想要发生的事情，但不幸的是它不是。

下面看看我的 css/html：http: //jsfiddle.net/CmJ7P/。您可以就如何实现这一目标提供任何帮助，我们将不胜感激。

编辑：如果可以的话，我更喜欢 IE6 中的解决方案

我想使用 DIV 进行两列布局，其中右列将具有 200px 的固定宽度，而左列将占用剩余的所有空间。

如果您使用表格，这很容易：

但是DIV呢？有可能做到这一点吗？如果是，那么如何？

我环顾四周，还没有找到我正在寻找的东西，所以希望这个问题还没有在其他地方得到回答！

无论如何，有问题的布局可以在这里找到。我想要实现的是固定宽度的左列和流体宽度的内容区域。在大多数情况下，它工作得很好。但是，当内容扩展超出浏览器窗口的高度或宽度时，这些部分似乎不会像我想要的那样扩展。注意顶部的灰色条没有到达页面内容的右侧，并且左列的高度也没有到达页面内容的底部。

我是否认为这是因为通过 CSS 将某些东西设置为 100% 高度或 100% 宽度是静态的？即无论浏览器窗口的高度/宽度是什么，当调用 CSS 时，它都会被保存，就是这样？

如果是这种情况，也许我需要研究一些其他方法来设置元素的高度和宽度。有任何想法吗？另外，请注意页面中的虚拟内容现在是图像。我想模糊名称等以保持数据的私密性。

感谢您所有的帮助！！！

在响应式网页设计中放大和缩小图像的首选方法是什么？

不同屏幕尺寸的不同图像更好还是我们应该上下缩放相同的图像？

考虑到网站的性能，哪个选项最好？

我需要跨浏览器的方式来处理所有最新和旧的移动浏览器。

我有一个服务器端组件，它使用DIV不固定宽度生成流体布局“工具栏”，A在其中生成许多。

然后我需要自定义该布局以使所有A标签自动适应父宽度。但是孩子的数量是可变的，父母的宽度是未知的（它会自动适应窗口）。

我用这个小提琴做了一些测试：http: //jsfiddle.net/ErickPetru/6nSEj/1/

但是我找不到使它动态的方法（取消注释最后一个A标签以查看它是如何不起作用的，哈哈）。

我无法更改服务器端源以生成具有固定宽度的 HTML。如果有任何方法，我真的只想用 CSS 来解决它，即使用 JavaScript 我也可以达到这个结果。

如何使所有孩子自动适应父母的宽度，而与孩子的数量无关？

基于对另一个我的问题的回答（这个：How to make children auto fit parent's width only with CSS?），我在想哪个是解决性能问题的最佳 jQuery 方法。

块 1：在需要时查找所有 DOM 元素：

块 2：仅查找 DOM 子级，使用 each()、parent() 和兄弟姐妹()：

块 3：首先找到 DOM 父级，使用 each() 并根据上下文找到子级：

如果有人想测试，这里是小提琴：http: //jsfiddle.net/ErickPetru/6nSEj/3/

那么，哪个区块更好呢？为什么？