草庐IT

fixed-width

全部标签

html - 什么是最小宽度 : 100%; width: auto actually do?

我在CodePen上找到了一个很好的全屏视频示例:https://codepen.io/dudleystorey/pen/knqyK我很难理解以下样式:video{min-width:100%;min-height:100%;width:auto;height:auto;}为什么我们不能只指定最小宽度和最小高度?为什么我们需要将宽度和高度设置为自动? 最佳答案 min-width:100%确保元素至少与其容器一样宽。width:auto允许元素保持其原始大小。所以两者的结合可以理解为“让元素占据它需要的空间,除非它小于它的容器的宽度

javascript - jQuery .width() 和 .height() 奇怪的行为

为什么在followingcode.height()返回95而不是100,而.width()按预期返回200?我使用Firefox3.6.3。HTML:CSS:#my{border:5pxsolidred;}JS:$("#my").width(200).height(100);$("#log").append("Width="+$("#my").width()+"");$("#log").append("Height="+$("#my").height());我尝试了.outerWidth()和.outerHeight()以及.innerWidth()和.innerHeight(),但

jquery 点击不使用 css 'position :fixed' 属性

当我删除这个属性时它工作正常,为什么会这样?这是jquery函数:$(document).ready(function(){$('#flogo').click(function(){window.alert("clicked");})});Html代码如下:这是CSS:.fixedlogo{position:fixed;//Ifiremovethislinethenjqueryisworking.height:50px;margin-top:-20px;} 最佳答案 这可能是z-index而不是jQuery的问题。jQuery不关心

html - CSS:图像具有 "Fixed"高度、最大宽度并保持纵横比?

我有一组图片,每张图片的高度和宽度都不同,我想将它们放入div标记中。我希望图片尝试具有固定高度,除非宽度超过固定量,因此我希望缩小高度以保持纵横比。我试过:.ArtistPic{height:660px;max-width:720px;}这固定了高度,但如果图像宽度超过720像素,它会水平挤压图片并且不会保持纵横比。建议?编辑:也许更好的表达方式是我希望图片扩展到其中一种尺寸并保持纵横比。 最佳答案 这是否满足您的需求?.ArtistPic{max-width:720px;max-height:660px;}参见http://js

html - Safari - 位置 :fixed doesn't breaks element from scope

我发现了一个与定位相关的奇怪的Safari行为。例如:#parent{position:fixed;overflow-x:hidden;height:30px;}#toolTip-child{position:fixeddisplay:block;top:10px;left:16px;height:100px;}据我所知,当位置设置为固定(或绝对,在那种情况下无关紧要)时,元素应该脱离范围并以某种方式独立呈现。除了Safari之外,它在我们用来测试我们开发的网站的每个浏览器中都像我上面提到的那样工作。在Safari中,如果父元素是fixed定位和overflow-x属性。被添加,无论我

javascript - CSS "position:fixed": mobile zoom

我正在尝试解决移动浏览器上css“position:fixed”属性的问题。我有一个固定的div:...othercontenthere...使用CSS:#logo{position:fixed;-webkit-backface-visibility:hidden;bottom:100px;right:0px;width:32px;height:32px;}因此,通常行为完全符合预期,div位置始终位于窗口的右下角,与滚动位置无关。我的问题是,在移动浏览器上,当用户缩放页面时,在一定缩放级别后div位置是错误的(有时div会消失在窗口之外)。我知道移动浏览器不能很好地支持固定位置,但我

html - 在桌面上 Bootstrap navbar-fixed-bottom,在移动设备上 Bootstrap navbar-static-top?

有没有办法让Bootstrap导航栏在移动设备上保持navbar-fixed-bottom,在桌面上保持navbar-static-top?我正在考虑创建两个导航栏并隐藏一个并显示另一个,但我不确定这是否合适;在相关说明中,可以使用两个具有相同角色的导航元素吗? 最佳答案 您还可以通过使用javascriptjquery根据屏幕宽度添加和删除导航栏的类来执行此操作。if($(window).width()>330){$('.navbar').addClass('navbar-static-top');}else{$('.navbar

html - 使用 max-height 和 max-width 垂直居中图像

我有以下html代码:使用这些样式,宽度大于400像素的图像会调整大小但仍保留在div的顶部。有没有办法让它们垂直居中? 最佳答案 CSS:div{border:3pxsolidcoral;width:400px;height:400px;background:#d4d0c8;line-height:400px;text-align:center;}img{max-width:400px;max-height:400px;vertical-align:middle;}参见demofiddle.

html - Min-width, max-width css 使用最小宽度

好的,所以我希望做的是创建一个DIV,它会根据其中的内容自动调整大小,但它应该使用尽可能小的宽度。我不知道如何做到这一点。所以,如果我有一个包含3个字符的DIV标签,这无疑小于200px宽,那么我想要的是div为200px。如果有更多文本,我希望它自动调整大小,以便文本适合。**仅使用***CSS*这可能吗?******更新**让我看看是否可以更好地解释这一点。我有一个DIV:+++++++++++++++++++++++++++++++++|-------------------------------||-----textthislongertext-----||---------

jquery - .width() 函数没有返回正确的值

我正在尝试使用.width()通过jQuery动态访问元素的宽度。在开发人员工具中,我可以看到元素的宽度为37.333Px,而.width()给出38.33334Px。开发者工具中的宽度宽度来自.width()在这种情况下差异是1px,但有时差异是小数。为什么会有这样的差异?我哪里错了?有没有其他的可以得到精确的宽度。 最佳答案 我们可以通过下面列出的几种方法来获取宽度,width()-设置或返回元素的宽度innerWidth()-返回元素的宽度(包括填充)outerWidth()-返回元素的宽度(包括填充和边框)。outerWid