小编Vin*_*rgh的帖子
具有基于%的宽度和基于px的边框的浮动元素:避免换行的最佳方法是什么？
我有一个问题,在我的睡眠中无情地恐吓我.如果你有一个可以达到的解决方案并且小心分享它,请做; 我想再度一个正常的睡眠之夜.
在我的最新项目中,有多次我需要将4或5个元素彼此相邻浮动.每个元素的大小必须使用百分比(%),但也必须具有border-right: 1px solid #000.
曾几何时,我通常会使用百分比调整每个元素的大小,然后创建一个子元素,该子元素具有父级可能应具有的所有样式属性,包括border-right.但是,这种解决方案并不理想,因为它涉及大量不必要的标记.
然后一位同事指导我另一个解决方案.当元素的宽度使用%s调整大小并且还需要时border-right: 1px solid #000,请将其应用margin-right: -1px为偏移量.虽然它有效,但它为我创造了另一个问题(这就是为什么我们在这里,在一起,联合).
当在任何主要浏览器(ctrl mousescroll,ctrl - )中缩小时,作为讨论焦点的浮动元素倾向于跳舞一下; 最后一个元素在中断到下一行之间切换,然后再回弹.请参考下图:
应该解决这个问题的原因是因为项目的范围有可能为来自不同人口统计的人们提供服务(特别是那些可能需要滚动或者向外滚动以使文本更大或更小的人).确实是一个非常广泛的项目.
如何达到上述示例中突出显示的目标？如何将4个或5个或更多(或更少)的边界元素相互浮动,按比例使用%s进行大小调整,而不会破坏形式？
推荐指数
解决办法
查看次数
Chrome和它处理%s
当使用百分比(%)来调整元素大小时,Chrome显然更喜欢用数学方法编写自己的规则.
据我所知,当你加80 + 20时,你得到100; 对？好的.Chrome也了解这一点.但是,如果我们以不同的方式写出相同的等 例如:(78 + 1 + 1)+(18 + 1 + 1)你得到了什么？是100吗？我也是.
所以后来有人可以请告诉我为什么铬不以为然？
取两个元素并将它们并排放在一起.然后,应用于width:20%一个元素和width:80%剩余元素.您会注意到100%的页面(或容器)已被两个元素并排占用.但是,让我们保持简单,并在每个元素的两侧添加仅1%的填充.这意味着一个元素将具有width:18%; padding:1%,而另一个元素将具有width:78%; padding:1%.理论上,这应该仍然具有相同的结果:100%的页面(或容器)被两个元素并排占用.但在Chrome中,情况并非如此.它不足.
证据是在布丁中:jsfiddle(如果你使用的是Chrome,你会发现细微的差别).
这是令人沮丧的,因为当它全部加起来时,特别是并排使用更多的元素,它可以真正抛出一个布局.我知道通过创建子元素来处理填充和/或边距,我们可以避免这种情况,但这可能导致使用标记,否则这将是多余的.
我只需要解释为什么Chrome会以这种方式运行(也许它完全是一个Webkit的东西,我还没有测试过它).
推荐指数
解决办法
查看次数
为什么我的:悬停不起作用？
我有一个导航.当我悬停一些元素时,子菜单应显示为"阻止",但这不起作用.看到:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="generator" content="Notepad++" />
<meta name="author" content="Erick Ribeiro" />
<meta http-equiv="refresh" content="60" />
<title>Mozilla Firefox</title>
<style type="text/css">
*{
font-family: calibri;
}
#menu
{
float: left;
}
.submenu
{
margin-top: 26px;
padding: 10px;
border: solid 1px rgb(224, 224, 224);
background: rgb(254, 254, 254);
color: rgb(0, 128, 224);
border-radius: 0 0 4px 4px;
}
#menuHome:hover ~ #submenuControle
{
display: block;
opacity: 0;
color: red;
}
#submenuHome
{
display: …推荐指数
解决办法
查看次数