程序设计 css

9

我有一个可以放在一起的网站，其纵横比大约为 16:9等于风景，例如视频。我想将其居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。例如：高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。短而宽的页面将使内容延伸到整个高度，并具有成比例的宽度。我一直在研究两种方法：使用具有正确长宽比的图像来扩展容器div，但是我无法在主要浏览器中以相同的方式显示图像。设置成比例的底部填充，但这仅相对于宽度有效，而忽略高度。它的宽度不断增大，并显示垂直滚动条。我知道您可以使用JS轻松完成此操作，但是我想要一个纯CSS解决方案。有任何想法吗？

122 html css responsive-design aspect-ratio

6

在CSS中计算最大值或计算最大值

是否可以做这样的事情 max-width: calc(max(500px, 100% - 80px)) 要么 max-width: max(500px, calc(100% - 80px))) 在CSS中？

122 css

8

width：自动用于<input>字段

新手CSS问题。我认为width:auto一个display:block元素的意思是“填充可用空间”。但是对于一个<input>元素来说似乎并非如此。例如： <body> <form style='background-color:red'> <input type='text' style='background-color:green;display:block;width:auto'> </form> </body> 然后有两个问题：是否确切定义了width：auto的含义？CSS规范对我来说似乎很模糊，但也许我错过了相关部分。有没有一种方法可以实现我对输入字段的预期行为-即。像其他块级元素一样填充可用空间？谢谢！

122 css

7

如何在div中将居中元素水平居中

我试图将两个链接“查看网站”和“查看项目”置于周围div的中心。有人可以指出我需要做些什么才能使这项工作吗？ JS小提琴：http：//jsfiddle.net/F6R9C/ 的HTML <div> <span> <a href="#" target="_blank">Visit website</a> <a href="#">View project</a> </span> </div> 的CSS div { background:red;overflow:hidden } span a { background:#222; color:#fff; display:block; float:left; margin:10px 10px 0 0; padding:5px 10px }

122 css

12

通过参数清除缓存

我们希望在生产部署中缓存崩溃，但不要浪费大量时间来弄清楚这样做的系统。我的想法是在当前版本号的css和js文件的末尾应用参数： <link rel="stylesheet" href="base_url.com/file.css?v=1.123"/> 两个问题：这会有效地打破缓存吗？由于参数表明这是动态内容，因此该参数会导致浏览器从不缓存该URL的响应吗？

122 javascript html css caching

5

CSS3转换不起作用

我正在尝试通过将菜单项旋转10度来对其进行转换。我的CSS在Firefox中可以使用，但是我无法在Chrome和Safari中复制效果。我知道IE不支持此CSS3属性，所以这不是问题。我使用以下CSS： li a { -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); } 有人可以建议我要去哪里错吗？谢谢。

122 html css

13

如何更改警报框的样式？

我需要在警报框中更改“确定”按钮的样式。 <head> <script type="text/javascript"> function show_alert() { alert("Hello! I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> 运行代码段隐藏结果展开摘要

122 javascript css

4

附加具有淡入效果的元素[jQuery]

var html = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(html).fadeIn(999); 这似乎不起作用。我只想在添加内容时产生酷炫的效果。注意：我只希望新的“ blah” div淡入，而不是整个“ mycontent”。

121 javascript jquery html css

3

用SCSS / SASS计算百分比

我想通过计算以百分比形式在scss中设置宽度，但这给了我错误。 “ ...- width：（4/12）％”：预期的表达式（例如1px，粗体）后为“;”无效的CSS 我想做类似的事情 $my_width: (4/12)%; div{ width: $my_width; } 如何在其中添加％号？ px和em同样的问题

121 css sass

4

如何让div在内部漂浮时增加高度

当div内部漂浮时，如何增加其高度？我知道为宽度定义一个值并将溢出设置为隐藏工作。问题是我需要一个可见溢出的div。有任何想法吗？

121 css html overflow css-float

7

有没有一种方法可以检查网页上正在使用或未使用哪些CSS样式？

想知道网页上当前正在使用哪些CSS样式。

121 css

7

角度2 ngIf和CSS过渡/动画

我希望div使用CSS从右角2滑入。 <div class="note" [ngClass]="{'transition':show}" *ngIf="show"> <p> Notes</p> </div> <button class="btn btn-default" (click)="toggle(show)">Toggle</button> 如果我仅使用[ngClass]来切换类并利用不透明性，则可以正常工作。但是li不想从一开始就渲染该元素，因此我先用ngIf“隐藏”了它，但是之后过渡就无法正常工作。 .transition{ -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ; -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; margin-left: 1500px; width: 200px; opacity: …

121 css angular angular-animations

18

如何使用原型自动调整文本区域的大小？

我目前正在为所工作的公司开发内部销售应用程序，并且我有一张表格可以让用户更改收货地址。现在，我认为它看起来要好得多，如果我要用于主要地址详细信息的textarea仅占用其中的文本区域，并且如果更改了文本，则会自动调整大小。这是当前的屏幕截图。有任何想法吗？ @克里斯很好，但是我有理由要调整大小。我希望占用的区域是其中包含的信息的区域。从屏幕快照中可以看到，如果我有固定的textarea，它将占用相当大的垂直空间。我可以减少字体，但是我需要地址大且可读。现在，我可以减小文本区域的大小，但是对于地址行占用3或4（一行占用5）行的人来说，我遇到了问题。需要用户使用滚动条是主要的禁忌。我想我应该更具体一些。我需要垂直调整大小，宽度也没关系。唯一发生的问题是，当窗口宽度太小时（如您在屏幕截图中看到的），ISO编号（大的“ 1”）被推到地址下方。这不是要有个花哨的东西。这是关于用户可以编辑的文本字段，它不会占用不必要的空间，但会显示其中的所有文本。尽管如果有人想出另一种方法来解决问题，我也很乐意。我对代码进行了一些修改，因为它的行为有些奇怪。我将其更改为在键入时激活，因为它不会考虑刚刚键入的字符。 resizeIt = function() { var str = $('iso_address').value; var cols = $('iso_address').cols; var linecount = 0; $A(str.split("\n")).each(function(l) { linecount += 1 + Math.floor(l.length / cols); // Take into account long lines }) $('iso_address').rows = linecount; };

121 javascript html css textarea prototypejs

10

使用CSS格式化数字（小数位数，数千个分隔符等）

是否可以使用CSS格式化数字？即：小数位，小数点分隔符，千位分隔符等。

121 css number-formatting

8

我可以在不为单个单元格上色的情况下使用CSS来对表格列进行着色吗？

有没有一种方法可以使列的跨度一直向下着色。请参阅下面的开始示例： <table border="1"> <tr> <th>Motor</th> <th colspan="3">Engine</th> <th>Car</th> <th colspan="2">Body</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>7</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table> 运行代码段隐藏结果展开摘要我正在寻找一种更好的方式（更少的代码，非单独的着色）来着色，例如，“ Engine”和“ Body”跨度，包括它们下面的所有单元格 #DDD <style> .color { background-color: #DDD } </style> <table border="1"> <tr> <th>Motor</th> <th colspan="3" class="color">Engine</th> <th>Car</th> …

121 html css

Questions tagged «css»