Html 尽管总宽度正确，但div不浮动_Html_Css_Grid_Css Float

Html 尽管总宽度正确，但div不浮动

html css grid

Html 尽管总宽度正确，但div不浮动,html,css,grid,css-float,Html,Css,Grid,Css Float,我无法理解为什么我的25%股息没有浮动到75%附近。包括页边距在内的div宽度总和为.content div的正确总宽度。我一定是遗漏了一些关于边距、填充和浮动如何协同工作的信息。我会使用一个现成的网格系统，但在这种情况下，它必须是一个自定义的如果有人能给我一个暗示，我将不胜感激这是HTML <body> <div class='container'> <div role='header'> <div class='

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

如果有人能给我一个暗示，我将不胜感激

这是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>


100%列
75%列
25%列

您需要将页边距更改为“仅右侧”。同时将浮动更改为右侧

这是你的css代码。请更换并检查

.section25 {
  background: none repeat scroll 0 0 blue;
  float: right;
  margin: 0 5px 0 0;
  width: 24%; }

更新您的小提琴：

因为您的

分区上有左和右页边距
，而它们不在75%
，所以我们将它们设置为74%和24%
等。
这是因为您使用了页边距，页边距在框的外部，而填充在内部。（边距将与宽度一起添加）
除去
margin

从你的容器里
用0,5%代替0,5 px的保证金解释
您在CSS
代码中留下了一些边距
边距影响DOM元素的大小：

解决方案
（）
替换.section25
和.section75

CSS
类.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%;
}

这是
因为页边空白：它们也增加了页边的大小。w3schools.com是一个需要避免的网站。@Borodin我知道。这会使我的回答无效吗？还是仅仅是一个一般性的陈述？谢谢Santo！！我已经添加了-webkit框大小：边框框和-moz框大小：边框框以便它支持所有浏览器。还更新了小提琴。非常感谢！之前我只在容器上填充了填充物，但添加了box size-property有助于确保容器真正保持我告诉它们的宽度。
.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%;
}