问题标签 [elasticlayout]

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.

0 投票
2 回答
1592 浏览

css - 使用 em 进行布局会导致不同浏览器之间的不一致

我正在尝试使用弹性布局构建网站。我使用了 Eric Meyer 的 CSS 重置,也用于body {font-size:62.5%}我的样式表。

编辑:这是我的 HTML 结构和 CSS

<html>
<head>
</head>
<body>
<div id="container">
<div id="gallery">
</div>
<div id="other">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

` html {bacgroound:url() 无重复顶部中心固定;}

`

如您所见,如果我为 设置固定宽度body,则backgroundfor#other#footer保持固定。width所以我试图通过设置to100%和 usingmargin: 0 8em 0 8em来让画廊和 and 的内容居中#other来绕过它#footer

我试图实现的布局基本上是一个包含图片库的单列布局。整个画廊应该在页面中居中。我已经用于em定义margin,这会在不同的浏览器中导致不同的结果。如果画廊在一个浏览器中居中,其他浏览器会显示不同的结果。我尝试过 Firefox、Chrome 和 IE9。

有没有办法使用em作为测量单位来产生相同的布局?或者我应该尝试固定布局并使用px而不是em

0 投票
2 回答
398 浏览

css - CSS 弹性文本框

我的要求是这样的。我需要一个宽度为 5px 的文本框。当我在上面输入一些东西时,宽度应该会增加。是否可以只使用 CSS 而不使用 js

谢谢

0 投票
1 回答
427 浏览

css - 现代图片库:流动的还是有弹性的?

从 ux.stackexchange 交叉发布(如建议)

我对 UX 和 IA 以及有关界面和解决方案设计的一切都是新手。我需要做一个基于网格的简单图片库。我读到了响应式设计和媒体查询。

好的,在宽屏中我有 7 列网格,在笔记本电脑中有 5 列,在平板电脑 3 和 smarthpone 1 中。这很酷。我已经通过流体布局完成了这项工作,使用百分比作为宽度属性。我喜欢这个解决方案,因为它对所有视口大小都很灵活。

但是如果用户使用“command +”或“command -”键改变字体大小呢?如果图像宽度是百分比,则容器大小不会改变,图像也不会改变。结果有点奇怪:一切都变小了,但图像没有改变(好吧,边距发生了变化,那就更奇怪了)。

但是,如果我使用 em 作为宽度,我将获得一个不再流畅的布局。

如何混合两种布局?

0 投票
1 回答
1019 浏览

android - 为 Android 创建单个弹性/液体布局屏幕

是否可以在调整大小以适应所有屏幕尺寸的情况下创建liquid/elastic屏幕布局?Android

目前,我正在为小型、中型、大型、xlarge 等使用不同的布局,但我真正需要的是一个可以缩放以适应的单一布局。

例如。基于百分比的布局。

我正在创建的应用程序并不特别需要利用更大的屏幕来更多地利用空间。

主屏幕只有 2 张图片、一堆按钮和底部的广告,我只是希望广告保持在底部,而其他所有内容都会根据屏幕尺寸相应放大。

为一个非常简单的界面设计 4 种不同的布局似乎过于复杂。

建议非常感谢!

0 投票
3 回答
870 浏览

css - 固定宽度的中间 div 和两侧的两个弹性宽度 div

我正在尝试创建一个排列,其中一个 div 中有三个 div 填充了页面的 100% 宽度。中间 div 将具有固定宽度,两个外部 div 将占据剩余空间的 50%。这可以使用 CSS 实现吗?

我已经设置了一个小提琴,它不起作用,http://jsfiddle.net/6y5hn/我尝试实现这一点,使用以下代码:

使用 CSS:

詹姆士

0 投票
1 回答
54 浏览

html - 弹性布局,现实世界中的例子

我一直在寻找在现实世界中使用弹性布局(基于使用 em 作为宽度的布局)的一些示例,并且我正在努力寻找任何使用它的示例。如果有人知道任何

0 投票
2 回答
1345 浏览

javascript - 在锚标记内的部分文本中插入省略号

<a href="#" >some lengthy text -- 07 May 2014 -- order ID#12345 </a>

我有一个锚标签,里面有一些文本,日期,数字(文本 - 日期 - 数字格式),如上所示,我想根据 out div 仅省略文本,这样整个锚内容( text,number,date) 不应换行。

在上面的示例中,我只想省略文本(一些冗长的文本)它不应该打扰数字和日期

我尝试<p>使用一些 CSS 将标签放在文本周围,它能够正确省略,但问题是锚标签的下划线看起来像是由 2 部分组成的,我不想要那个 http://jsfiddle.net/Vc4N6/3/

有没有更好的方法在 javascript 中执行此操作?这样我就不必与 CSS 斗争(使用不同的浏览器 IE8&9 必须与其他浏览器一起使用。)

注意:我不使用 jQuery 解决方案应该是纯 javascript

编辑:

我得到了上述问题的解决方案,但我的要求更多,我将在列表中使用这些行项目,添加到列表后,如果我在每个行项目中有不同的文本,它会在文本和日期之间引入空格。请参阅此处http:// jsfiddle.net/Vc4N6/13/

理想情况下它应该看起来像

  • 这是非常长的文本 长文本.. -- 2014 年 5 月 7 日 -- 订单 ID#12345
  • 短文本 -- 2015 年 6 月 6 日 -- 订单 ID#46453
0 投票
0 回答
19 浏览

css - 按行索引的列布局

我的设计如下:

在此处输入图像描述

有9个字段,例如。具有相同宽度和未知高度的段落(我不能简单地浮动它们)。

我尝试了多列布局,但需要将元素顺序交换为1-4-7-2-5-8-3-6-9.

'工作' HTML 是(引号中的'工作',因为项目的顺序不正确)

https://jsfiddle.net/ey1obeyn/2/

理想的(也是唯一正确的)HTML 是:

但结果是https://jsfiddle.net/ey1obeyn/1/

有没有 CSS 解决方案?不用 JavaScript 计算大小,真的要找 CSS。
谢谢。