gpt4 book ai didi

html - div 标签未正确对齐

转载 作者:太空宇宙 更新时间:2023-11-04 00:23:50 26 4
gpt4 key购买 nike

我在 div 标签上遇到了一个奇怪的问题,实际上这些 div 标签是对齐的并分组在一个容器中,但这里真正愚蠢的问题是我的代码

<html>
<head>
<style>
body {
padding: 0 2%;
}
#footer {
width: 100 %;
clear: both;
border: 1px solid #CCC;
}
#footer .col_one {
float: left;
width: 25%;
border: 1px solid #CCC;
}
#footer .col_two {
float: left;
width: 25%;
border: 1px solid #CCC;
}
#footer .col_three {
float: left;
width: 24%;
border: 1px solid #CCC;
}
#footer .col_four {
float: left;
width: 25%;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div id="footer">
<div class="col_one">
&nbsp; something here
</div>
<div class="col_two">
&nbsp; something here
</div>
<div class="col_three">
&nbsp; something here
</div>
<div class="col_four">
&nbsp; something here
</div>
<div style="clear: both">
</div>
</div>
</body>
</html>

现在在 #footer .col_three 中,当我将宽度设置为 24% 时,它们会以正确的顺序显示所有框,但随后我将其设置为 25%,最后一个就在第一个框的下方,为什么是这样吗?总的页脚容器是 100%,有四个 div 框,每个宽度为 25%,我错了,希望你能理解,抱歉英语不好。

最佳答案

那是因为你设置的宽度,是内容的宽度,不包括padding、margin和borders。所以总宽度是 100% + 8px(对于 4 个 div 每边的 1px 边框)。因此它不适合。

您可以通过在 div 中放置额外的 div 来解决这个问题。你制作的外层 div 宽度为 25%,没有边框。内部 div,你可以给一个边框,但没有明确的宽度,所以它会填充它的父级:

http://jsfiddle.net/GolezTrol/fm7LV/1/

我通过在这些 div 上放置单独的类来稍微修改选择器:col one 而不是 col_one。这样,您可以对所有列使用 .col 选择器,并在需要为特定列设置样式时使用 .col.one 选择器。 :)

关于html - div 标签未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7797608/

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