首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome 77.0.3865.90使用页边距-left:-100%弄乱布局

Chrome 77.0.3865.90是Google Chrome浏览器的一个版本。在该版本中,使用页边距属性left: -100%可能会导致布局混乱。

页边距是指在网页中设置元素与其周围元素之间的空白区域。通过设置left: -100%,元素的左边距被设置为其父元素宽度的负值,这可能导致元素超出其容器的范围,从而破坏布局。

解决这个问题的方法取决于具体的布局需求和目标。以下是一些可能的解决方案:

  1. 检查布局需求:首先,需要确定为什么要使用left: -100%。如果这是为了隐藏元素或实现一些特定的效果,可以考虑使用其他CSS属性或技术来达到相同的效果,而不会破坏布局。
  2. 使用其他定位属性:如果需要调整元素的位置,可以考虑使用其他定位属性,如position: absoluteposition: relative,并结合toprightbottomleft属性来精确控制元素的位置。
  3. 调整布局结构:如果元素的位置调整会导致布局混乱,可以重新考虑整个布局结构。通过重新组织HTML元素的层次结构或使用CSS布局技术(如Flexbox或Grid)来实现所需的布局效果。

需要注意的是,以上解决方案是一般性的建议,具体的解决方法可能因具体情况而异。在实际开发中,根据具体需求和情况选择合适的解决方案是很重要的。

关于Chrome浏览器的版本更新和具体的CSS属性使用,可以参考Google Chrome官方文档或开发者社区的相关资源。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 中你需要知道 auto 的一切!

Flexbox 在某些情况下,在flexbox中使用自动非常有用。当一个子项目有一个margin是auto 时,它将被推到远的另一。...例如,如果一个flex项目的左边是margin-left: auto,那么它将被推到最右边。 考虑下面的模型,父级元素是一个 flex 布局: ? 我们想把第二项推到最右边,自动就派上用场了。...使用CSS网格时,可以使用自动实现类似于 flexbox 的结果。...更好的是,使用flexbox或grid属性,以防使用它们完成工作。 如果没有,那么请使用自动作为最后的选择,而应使用CSS逻辑属性。...Flexbox 和 自动 当谈到flexbox时,它有无限的可能性。 通过将其与自动相结合,我们可以构建功能强大的布局。 考虑下面的例子 ? 我们在右侧包含一行标题,描述和一个操作按钮的行。

5.1K30

webkit中BFC元素临近浮动元素时的bug

其实以webkit为核心的浏览器,包括但不限于Safari和Chrome,也有一个关于浮动和的bug,同样会造成布局错误。...具体来说,可以分为两种情况: 当BFC与浮动方向相同的小于或等于浮动元素占据的总宽度(width+margin+padding+border)时,BFC另一侧的等于所设定方向上的(下图前两种情况...image.png 第一种情况:main的左边为50px,小于sider的总宽度100px,于是它右侧自动出现了50px的(等于margin-left); 第二种情况:main的左边100px...,等于sider的总宽度100px,于是它右侧自动出现了100px的(等于margin-left); 第三种情况:main的左边为150px,大于sider的总宽度100px,于是它右侧自动出现了...100px的(等于sider总宽度); 以上截图来自这个demo页面,你可以用Safari或者Chrome自己打开查看具体情况。

1.6K50

WordPress 主题教程 #11:宽度和布局

详细解释: margin: 0 auto 0 auto; 意思是(注意顺序):0上页空白,自动右页面空白,0下空白和自动左页面空白。从现在开始,记得设置左右空白为自动将使得居中对齐。...(我假设你使用的是 Firefox 和 Internet Explorer 6)。你的布局可能你看起来是正确的,但对于使用早前版本的 IE 用户可能不正确。...还记得设置左边和右边的空白为自动是居中吗?...第8步(额外的步骤):修正 IE 的双倍 bug Internet Explorer 有个双倍的 bug,这样在 IE 下,我们的页面就是 20像素,20像素的可能会破坏布局并把侧边栏挤到页面的底部...,因为一个20像素的使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。

1.1K20

【前端攻略】最全面的水平垂直居中方案与flexbox布局

Demo 块状元素的水平居中     要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边margin-left和margin-right设置为auto,即可实现块状元素的居中...学会使用flexbox 要为元素设置flexbox布局,只需将display属性值设置为flex。...Demo 已知高度宽度元素的水平垂直居中 法一 绝对定位与负实现 利用绝对定位,将元素的top和left属性都设为50%,再利用margin,将元素回拉它本身高宽的一半,实现垂直居中。...核心CSS代码如下: #container{ position:relative; } #center{ width:100px; height:100px;...Demo 法三. flex布局轻松解决 使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。

1.3K40

css负之详解

使用如下: #content {margin-left:-100px;} 负通常在小范围使用。但是接下来你会看到,它能做的事情很多。...这个技巧可以很好地用户流式布局。比如有一列宽度100%,另一列有固定的宽度,比如说100px。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦 简单的两列布局也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。...left;} 哈哈,这样你就得到了一个简单的两列布局。...灵活的文档布局是一种可访问性和SEO的技巧,通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负在多列布局中的应用。 微调元素 这是负外边最常也是最简单的使用方式。

2.2K40

css负之详解

自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负作为最少讨论到的定位方式要记上一功。...负使用如下: #content {margin-left:-100px;} 负通常在小范围使用。但是接下来你会看到,它能做的事情很多。...这个技巧可以很好地用户流式布局。比如有一列宽度100%,另一列有固定的宽度,比如说100px。...就不需要浪费很多贷款来加载大的图片来实现这个效果啦 简单的两列布局也是在流式布局中创建简单一列宽度固定,一列内容为宽度的100%的两列布局的好方法。...灵活的文档布局是一种可访问性和SEO的技巧,通过它能够让你根据你的关注点以任意顺序组织你的html代码。这里有一个文章讨论了负在多列布局中的应用。 微调元素 这是负外边最常也是最简单的使用方式。

1.8K80

CSS3与页面布局学习总结(四)——页面布局的多种方法

一、负与浮动布局 1.1、负 所谓的负就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。...常见的功能如下: 1.1.1、向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负可以实现上移。...当负的超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: </head...在淘宝UED(User Experience Design)探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负,这就是我们所说的双飞翼布局,实现的代码如下: <!

2.4K20

css布局使用

通过负将浮动的侧栏拉上来,左侧栏的负100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负为负的自身宽度刚好浮动到主面板对齐的右边...由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。...设置main宽度为100%,设置两侧栏的宽度。 设置 负,sub设置负左边100%,extra设置负左边为负的自身宽度。 设置main的padding值给左右两个子面板留出空间。...当面板的main内容部分比两的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。...设置main-wrap宽度为100%,设置两个侧栏的宽度。 设置 负,sub设置负左边100%,extra设置负左边为负的自身宽度。 设置main的margin值给左右两个子面板留出空间。

1.9K90

CSS布局(二) 盒子模型属性

详细来说,元素宽度=包含块宽度—元素水平外边-元素水平宽度-元素水平内边;   高度设置为auto,则会尽可能的窄。...  相比于盒模型的其他属性(如在定位中经常使用负值的margin),padding显得中规中矩了很多,没有什么兼容性,也没有一些特殊的问题   对于行内元素,左内边应用到元素的开始处,右内边应用到元素的结尾处...3、BFC造成的margin看似无效   左侧元素使用浮动,右侧元素使用overflow-hidden实现两栏自适应的布局时,右侧元素的margin-left值只有足够大,才能看到效果。...这是因为margin-left是相对于父元素左侧,而不是图片右侧 ?...: 10px 20px;   左上  【特殊图形】 圆形   元素的宽高相同,且圆角半径为宽高的一半 div{ width: 100px; height: 100px; border-radius

1.9K70

css布局 - 垂直居中布局的一百种实现方式(更新中...)

帮多行文本找一个继父来领养他,让继父弥补父元素给他带来的伤害(行高和水平居中对齐的样式修改) 2. margin负简单处理一下底部小“裂痕” 三、父元素高度 不 固定时,单行文本 | 图片的绝对垂直居中...上左50%方位值,先让左上角处于视图中心点  3. margin负,再让身子中心点挪到视图中心点 六、目标元素宽高也不固定时,元素依然水平垂直居中(经典弹层布局无宽高)  1. absolute定位飘起来...2、鼎鼎大名,margin负。 可行性分析:这种再根据当前或当前元素字体大小调整margin负大小值的做法实属有点不妥。 不过还好最近跟大神学了一招“万能胶”。这里暂且按下不表。...只不过其他场景使用translate有点大材小用。 关键点分析: 利用transform来实现垂直居中布局: box盒使用固定宽度的width+margin auto,实现水平居中。...如果将relative换成absolute,想实现水平垂直居中的弹窗效果时: 因为固定宽度,可以使用margin负值,即margin-left: -300px;实现水平布局

3.4K10

【知识】Latex中的emptmm等长度单位及使用场景

二、在使用的时候应该如何选择?他们分别适用于那些场景?三、有哪些使用示例?1. 设置文档的2. 调整字体大小3. 定义与文字大小相关的间距4. 调整表格、图片或其他浮动体的宽度5....在LaTeX中,em、pt、mm等都是长度单位,用于定义文档中元素的尺寸,比如字体大小、页面、间距等。...mm, cm:适用于页面布局设计,如设定、列宽等。当文档需要在多种不同的打印机或纸张尺寸上打印时,使用公制单位可以更容易地管理和预见打印效果。...in(英寸):主要用于符合美国标准的文档排版,例如设置按美国常用纸张尺寸(如信纸)的。适合在需要与设备的物理特性(如屏幕尺寸)对齐时使用。...设置文档的        使用geometry包设置页面的时,常用单位是cm或in:\usepackage{geometry} \geometry{left=2cm, top=2cm, right

37410

前端之HTML和CSS

标签语义化   在布局中需要尽量使用带语义的标签,使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构,提高网站在搜索中的排名(也叫做SEO),其次是方便代码的阅读和维护。....box1:{width:100px;height:100px;background:gold;} .box1:hover{width:300px;} css属性入门 布局常用样式属性: width...如padding:20px;padding是同时设置4个的,也可以像border一样拆分成分别设置四个:padding-top、padding-left、padding-right、padding-bottom...margin 设置元素和外界的距离,也叫外边,如margin:20px;margin是同时设置4个的,也可以像border一样拆分成分别设置四个:margin-top、margin-left、margin-right...*/ padding:20px 40px; /* 设置上下内边为20px,左右内边为40px*/ padding:20px; /* 设置四内边为20px */  设置外间距margin

4.3K30

css经典布局——双飞翼布局

主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两的内容设置position为relative...,通过左移和右移来使得左右两的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。...双飞翼布局的实现 left、center、right三种都设置左浮动 设置center宽度为100% 设置负left设置负100%,right设置负为自身宽度 设置content的margin..., #right, #center { float: left; } #center { width: 100%; background: rgb(206, 201, 201...); } #left { width: 200px; margin-left: -100%; background: rgba(95, 179, 235, 0.972);

1K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券