问题标签 [variable-width]

我正在尝试并排放置三个 div。

• 第一个 div 有一个固定的宽度，需要靠在屏幕的左侧（即：）float:left;。
• 下一个 div 也有固定的宽度，需要靠在屏幕的右侧（即：）float:right;。
• 最后一个div需要填充它们之间的空间，并根据浏览器窗口的宽度进行调整。

当中间的最后一个 div 达到某个最小宽度时，我需要它停止变小并在浏览器中显示滚动条。

这有可能实现吗？如果是这样，怎么做？

这是我的网站。（我整个早上都在努力，但目前我的主机似乎有一些问题，所以如果你无法连接它应该稍后再工作）。

如您所见，地图太大了。我有一个浮动在页面右侧的侧边栏，宽度为 150 像素，但这被掩盖了。我还有一个页脚，我将其设计为“推”到页面底部。如果没有地图 div，这可以正常工作，一切都应该是这样，但是当我在剩余空间中创建地图 div 时，我无法让它正确填充空间。如果我将宽度 + 高度设置为 100%，则侧边栏会被覆盖，并且地图在我的页脚下方延伸大约页脚的高度，这就是现在的设置方式。我尝试将宽度和高度设置为“自动”，但这并不能解决我的问题。它所做的只是将 div 的比例限制为我在代码中设置的最小宽度和高度（100x100px）。我已经设置了'html'和'body'

CSS

HTML - 为了便于阅读，我省略了标题等，但这可以使用我网站上的源查看器获得。

我有一个表格，其中包含按百分比设置的可变宽度和高度的单元格，我希望将文本截断，就像使用 text-overflow: ellipsis; 但我希望文本用多行填充我的单元格，直到空间不足。

我在 jsFiddle 上准备了一个示例：http: //jsfiddle.net/QEL2G/22/

在示例中，我希望绿色框具有三行文本（不必以 [...] 结尾），但如果 Lorem ipsum 不能满足分配的大小，则不是所有文本。

如果你去掉空格： nowrap; 它会在第一行之后停止截断它，但是它似乎不考虑单元格的高度并且根本不会截断。

我尝试了很多不同的东西，事实上，如果我想为单元格定义一个静态大小，有一个非常简单的答案......但事实并非如此。

我希望在网络中水平显示可变数量的图像（可以使用水平滚动条进行导航），但我无法让图像显示超过浏览器的 100% 宽度。

由于图像的数量会有所不同，因此我需要避免为容器设置恒定的宽度。

这是我现在正在尝试的代码。

HTML：

CSS：

希望我很清楚，有人可以帮助我。提前致谢！

我正在尝试将五个水平菜单元素与'float：left'在一个跨越屏幕80％且最小为960px的容器内对齐。为此，我最初将它们的最小宽度设置为 192px (960/5) 并将它们的宽度设置为 20%，但很快意识到这与添加 1px 边框效果不佳，导致其中一个按钮被“扔到一边”。

将宽度分别更改为 19.895333% 和 191px 解决了这个问题，但这显然是一个 hacky 解决方案，它还在菜单右侧留下了 2-3 像素的丑陋空间。

有没有更优雅的方式来对齐这些元素并考虑边框、填充等添加的额外宽度？我尝试使用“溢出：隐藏”来简单地隐藏容器外可能戳出的任何内容，但这只是隐藏了整个第 5 个按钮。

一张图片来说明结果：

html代码：

CSS代码：

先感谢您！

我正在尝试使用 CSS 而不是图像创建选项卡。我希望标签自动适应其中的内容，但是我希望它们的最大宽度为 200 像素。我希望标签宽度自动调整为内容，以便标签具有可变宽度但保持 20px 左/右填充。任何人都可以解释如何去做吗？

到目前为止，这是我的 HTML：

还有我的 CSS：

还有一个 JSFiddle！

谢谢！

我想要一个具有以下条件的 4 列布局面板栏：

• #c1, #c2 = 具有特定宽度
• #c3 自动填充剩余宽度
• #c4 自动宽度（例如，如果添加更多列表，则增加/减少宽度）并将对应于 #c3

我正在寻找一种解决方案，可以：

• 让#c4 向右浮动而不是绝对位置
• #c3 上没有特定的边距，它将动态对应空格，而不管有多少列表添加到 #c4
• 在 .smenu 上具有可变宽度，而不是具有特定宽度以使列表项水平流动。
• 跨平台和设备响应式工作（最低浏览器支持 IE8）
• 水平显示菜单列表而不使用容器的特定宽度

附加问题：

• 当我将鼠标悬停在类名为 .show-sub 的标签上时，.smenu 会显示/显示，但是当我将鼠标移到试图将鼠标悬停在其中一个子菜单列表上时，它会隐藏。当我悬停时，有什么办法让它保持打开状态？

不同的尝试：

我也尝试过 display:table-cell 但无法正常工作。点击这里进行演示

HTML

CSS

我有一个带有给定 CSS 的 HTML 结构。和元素
都应该在同一行中呈现。元素不应具有固定宽度，并且元素应根据其内联集宽度填充旁边的其余空间，这意味着每个元素将具有不同的总像素宽度，但应仅填充给定百分比的可用空间. 可以以任何方式更改 HTML 结构和 CSS 规则。 captionprogresscaptionprogresscaptionprogress

是否可以仅使用 CSS 解决此问题？

您可能会说这已经被问过，但这是一个带有错误的变体。所以我们都知道用来回答这个问题的技巧： Fixed width div on left, fill remaining width div on right

但是，如果可变宽度元素是输入标签，这将不起作用。

http://jsfiddle.net/8pk4K/2050/

即使覆盖输入默认 css 也不能解决此问题：

我玩这个已经很久了，它只发生在输入标签上，如果你用一个跨度替换它（默认显示内联但将它设置为显示块）它仍然有效。

知道为什么这只对输入标签不起作用吗？

编辑：为澄清起见，我知道解决方法是将输入放入 div 并将宽度 100% 应用于输入。我的问题是为什么这是必要的，而不是如何解决它。

这个问题需要一点解释。请多多包涵：

几个月前，我为网站上的一个部分设置了一个由三部分组成的标题。在此标题的左侧有一个标题，其内容可以更改。右侧是一个徽标，始终为 150 像素宽 x 60 像素高。它们之间是一组双线。像这样的东西：

[这是标题] ========================================= [这里的标志]

这个网站是响应式的，所以标题的整体宽度是可变的。
标题必须始终位于一行。包含双线的 div 需要更改大小以填充 Title 和 Logo 之间的空间。

我最初设置它，以便使用媒体查询和 calc(); 调整行的大小。功能。但是，该网站必须一直兼容到 IE 8，所以我最终编写了一些 JS 来让它工作。

这是一个本质上反映这种行为的 JS 小提琴：http: //jsfiddle.net/55u5mpu2/2/

问题是，脚本需要很长时间才能在慢速连接上加载，因此徽标会在一个奇怪的地方出现一段时间。因此，我试图找到一个纯粹的 CSS/HTML 解决方案来做与我的脚本相同的事情。

这里有相关的问题，但似乎没有一个适用。我不能在标题或线条上加上宽度，因为它们都是动态的。

表格似乎工作正常，但如果我输入 width: auto; 在两个 tds 上，事情失败了。

这是我创建的一个好的表格布局示例：http: //jsfiddle.net/d40a429s/1/

我试过把 position: absolute; 以及徽标和标题上的顶部/左侧或顶部/右侧，但我无法让中间 div 正确调整大小。

所以：如果有人在这里成功：关于我如何在没有 JS 的情况下让它工作的任何想法？或者也许是一种整理我的 JS 以使其运行得更快的方法？

谢谢！