问题标签 [variable-width]

如何水平居中可变宽度的浮动元素？

编辑：我已经使用包含div浮动元素并为容器指定a width（然后margin: 0 auto;用于容器）来进行此工作。我只是想知道它是否可以在不使用包含元素的情况下完成，或者至少不必width为包含元素指定 a 。

我正在学习如何设计一个网站。其中一个决定似乎是如何向用户呈现数据，即存在不同的显示器尺寸，是否将数据结构化以占据整个屏幕（又名 GMail）或使其固定宽度，即选择标准显示器尺寸（ 1024x768）并使其在所有显示器上看起来都相同（又名 StackOverflow）。

我倾向于可变宽度设计，我想了解的是这个设计决策对编程有什么影响？即，当我对具有可变宽度设计的网站进行编程时（具体来说——CSS 的使用），我必须记住什么？

VT100 风格的终端处理处理固定宽度的字体。

是否可以在 Windows 上的 Putty 中使用像 Comic Sans MS 这样的可变宽度字体？如果是，怎么做？

我正在设计一个带有联系表格的网页，您可以在此处看到。

如您所见，页面设计为可变宽度。我希望图像、表单和内容区域的边缘之间的间距相等，即有四个宽度相等的空间。

目前我已经设计了它，使图像以 20% 宽度的 DIV 为中心，联系表格以 60% 宽度的 DIV 为中心。这工作正常，但不是很好，因为随着浏览器宽度的增加，联系表单和图像之间的间距大于图像和内容区域边缘之间的间距。我想找到一种保持所有空间等宽的方法。

这是相关的CSS：

这是相关的HTML：

有人可以帮忙吗？

谢谢，

缺口

I want to add div to my website which has variable width, and that it will display scroll bars when the width is smaller than the longest line. I tried wrapping such a fixed width element, in a variable width (100%) but that didn't work. I got the scroll bars on the entire page.

Any thoughts?

Thanks Yaron

我无法使以下三列布局正常工作：

在哪里：

• A是固定宽度。
• B使用了 A 列和 C 列未使用的容器中的任何可用空间。
• C包含的内容可能会改变宽度并需要将 B “推”到不同的宽度。

这是我创建这个的最佳尝试：http: //jsfiddle.net/x3ESz/

我看过的所有其他主题都建议将所有三个都与 B 一起浮动，使用边距来防止换行，但这不允许 C 根据 C 的内容调整 B 的大小（因为必须为 B 的右边距指定一个值）。

我也很想避免诉诸 JS 来实现这一点。

我有可变宽度的 HTML 布局，在可变宽度的内容左侧有一个固定宽度的菜单<div>（由 css 最大宽度和最小宽度设置）。对于非常狭窄的浏览器窗口，我希望将内容包裹在菜单下方，我目前正在通过设置float:left菜单和内容来实现这一点。

在此示例中，div当前只要浏览器视口小于 1000 像素（菜单宽度 + 内容最大宽度），就会发生内容换行。我希望首先减小内容的宽度，并且仅当视口小于 500px 宽（菜单宽度 + 内容最小宽度）时才将内容包裹在菜单下方

有没有办法实现这一点，无论是我目前的 float <div>s 安排，还是其他方式？

我想要一个在左侧具有固定宽度图像的 div 和一个具有背景颜色的可变宽度 div，它应该在我的设备上扩展其宽度 100%。我无法阻止第二个 div 溢出我的固定 div。

当我在可变宽度 div 处添加溢出：隐藏时，它只会跳到照片下方，在下一行。

我怎样才能以正确的方式解决这个问题（即没有hacks或margin-left，因为我需要稍后通过媒体查询使网站响应，并且我必须为每个设备使用其他分辨率图像更改图像）？

• 初学者网页设计师试图解决响应式网站的恐惧 -

HTML：

CSS：

我有一个可扩展的菜单，它从一个细左手栏弹出（打开人和关闭菜单类型）

大多数时间，它将占用大约 50px，除非它打开时，大约 250。

我希望我的#content div 是余数的 100%。因此，当菜单打开时，它的 100% 页面 - 50px 然后 100% 页面 -250px。

Bellow 是我的 HTML，我需要哪些基本的 CSS 来实现这一点？

请注意，我已将 exra 行放入，以分离包装器内部的 2div

.

.

.

救命图...

菜单已关闭

菜单打开

这是我一直在测试的代码

("#content").css("width",cont_div_width+"px");

("#content").css("width",cont_div_width+"px"); }

在哪里

和

和

我有一个需要适应不同屏幕尺寸的网站。其中大部分都非常简单，但我有一个幻灯片需要根据屏幕大小调整大小并将图像置于页面中心。图像比页面宽，以便在尺寸变化时两侧没有空白。

全尺寸图片的宽度为 4800 像素，但这会随着浏览器的大小而变化。

如果只是以一种尺寸居中图像的问题，我会使用

但是由于我根据可用空间调整图片大小，所以我可以随时显示图片的全高，显示图像的宽度会发生变化，并且居中的方法不好。

那么如何使用javascript检查当前图像宽度并更改margin-left属性，或者可以在css中完成吗？

编辑在这里添加一些CSS：

根据浏览器/屏幕大小，这有点好调整图像大小以适应可用空间中的高度。但是缺少居中。