为啥一个元素的 CSS 负边距从浮动框中取出另一个元素
Posted
技术标签:
【中文标题】为啥一个元素的 CSS 负边距从浮动框中取出另一个元素【英文标题】：Why one element's CSS negative margin takes out the other element from floated box为什么一个元素的 CSS 负边距从浮动框中取出另一个元素 【发布时间】：2016-06-22 18:23:49 【问题描述】：这是一个更大的项目，但会发生什么情况是在一个元素 (.pag) 上使用负边距会从浮动框 (#ar_wr) 中取出另一个元素 (#ar_wr_in)？
它在 Firefox 中运行良好，但在 Chrome 或 IE 中却不行。
html：
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS：
body
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
section
display: block;
float: left;
section
margin: 0px;
#ar_wr
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
#ar_wr
float: left;
margin-top: 80px;
#ar_wr_in
width 100%;
float: left;
margin-top: 17px;
.pag
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
.ar
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
这里是JSFiddle
是否有一些修复或破解让它看起来像在 Firefox 中一样？ 谢谢
【问题讨论】：
【参考方案1】：如果你让你的分页元素具有绝对定位，那么它可以很高兴地坐在它的父元素之外，而不会影响它之后的其他非绝对元素：
.pag
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
奇怪的是 Firefox 处理它的方式不同，但我实际上希望你在 Chrome 中看到的结果是使用这样的相对定位。
【讨论】：
感谢@Starscream1984 的建议。我认为绝对定位不适用于响应式设计，但会尝试像这样使用它：` .pag ` font-size: 12px;边距顶部：-77px； /* 背景：#ddffff; */ 位置：绝对；对：25%； ` 呃，对不起.pag font-size: 12px; margin-top: -77px; /* background: #ddffff; */ position: absolute; right: 25%;
实际使用position:absolute;和%的右边缘会在调整浏览器窗口大小时出现问题以上是关于为啥一个元素的 CSS 负边距从浮动框中取出另一个元素的主要内容，如果未能解决你的问题，请参考以下文章