gpt4 book ai didi

html - 尽管总宽度正确,但 Div 不 float

转载 作者:可可西里 更新时间:2023-11-01 13:35:40 26 4
gpt4 key购买 nike

我无法理解为什么我的 25% div 没有 float 在 75% 旁边。包括边距在内的 div 的宽度总和为 .content div 的正确总宽度。我一定是遗漏了一些关于边距、填充和 float 如何协同工作的信息。我会使用现成的网格系统,但在这种情况下,它必须是自定义的。

如果有人能给出提示,将不胜感激。

这是 HTML。

<body> 
<div class='container'>
<div role='header'>
<div class='row common-navigation'>
<div class='wide' id='globalnav'></div>
</div>
</div>
<div class='content' role='content'>
<div class='section100'>
<div class='component'>
<p>100% column</p>
</div>
</div>
<div class='section75'>
<div class='component'>
<p>75% column</p>
</div>
</div>
<div class='section25'>
<div class='component'>
<p>25% column</p>
</div>
</div>
</div>
</div>
</body>

Here's the fiddle

最佳答案

类 .section75 和 .section25 都在每个 div 的宽度上添加了总计 10px 的边距。所以要么你需要从宽度上减少相同的数量。或者您可以应用填充而不是像下面那样使用边距。

.section100,.section75,.section25 {float: left; padding: 0 5px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.section100 {
background: none repeat scroll 0 0 red;
width: 100%;
}

.section75 {
background: none repeat scroll 0 0 green;
width: 75%;
}

.section25 {
background: none repeat scroll 0 0 blue;
width: 25%;
}

这里是 jsfiddle

关于html - 尽管总宽度正确,但 Div 不 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17107259/

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