gpt4 book ai didi

CSS Percent size specifier sizing element to more than specified size

转载 作者:太空宇宙 更新时间:2023-11-04 15:17:04 28 4
gpt4 key购买 nike

在 CSS 中,我从来没有真正理解为什么会发生这种情况,但每当我为某物分配 margin-top:50% 时,该元素就会被推到页面底部,几乎完全消失这一页。我假设 50% 时,该元素将位于页面的中间位置。

设置元素的宽度和高度属性时也会发生这种情况。如果我将 div 的宽度设置为 100%,div 的右侧会超出可视屏幕,我必须滚动才能看到它。

为什么会发生这种情况,是否有解决方法?

编辑:

这是我的 CSS 代码。我也在使用 Bootstrap ,但这是我在 Bootstrap 之外注意到的一个问题。

html{
height:100%;
min-height: 100%;
min-width: 100%;
}
#button_container{
width:100%;
clear:both;
margin:0 auto;
margin-top: 25%;
}

#donate_section, #contrib_section{
display:inline;
}
#contrib_section{
float:right;
}

样板 HTML 标记:

<body>
<div id="someid">
<div>
<a></a>
</div>
<div>
<a></a>
</div>
</div>
</body>

最佳答案

读这个,然后再读一遍:http://www.w3schools.com/css/css_boxmodel.asp

您的“宽度”设置仅设置内容部分 - 因此您的总宽度为内容+边距+填充+边框。所以如果 width=50%,你真的有更多 55% 左右(正常的,小边距/填充/边框)。如果您希望您的 div 在外部仅占 50%,则需要有一个在其外部占 50% 的无填充/边距/边框 div,或任何数量的其他解决方案。

您也可能正在处理浏览器呈现不完美的事实。如果您想避免滚动,通常不应使用 100% 的宽度。 (这也是很好的“Web 2.0”设计,如果您遵循该学​​派 - 从可用性/可读性的 Angular 来看,您应该两边都有空白)。

编辑:此外,您的 % 是相对于宽度,而不是高度。例如,参见 CSS fluid layout: margin-top based on percentage grows when container width increases .

关于CSS Percent size specifier sizing element to more than specified size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14917712/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com