解释

Question

我无法理解为什么我的25％div不会漂浮在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>

Here's the fiddle

Answer 1

将您的保证金替换为0.5％而不是o，5 px

Answer 2

类.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

Answer 3

您需要将保证金更改为正确。也将浮动更改为右边。

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

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

Answer 4

更新了您的小提琴：http://jsfiddle.net/ercrL/1/

因为您的margins div上有section，而且他们不在75%，我们将其设置为74% and 24%等。

Answer 5

这是因为您使用保证金，保证金位于框的外部，而填充位于内部。（保证金将加上宽度）

除去

margin

来自你的容器

http://jsfiddle.net/ercrL/4/

Answer 6

解释

您在CSS代码中留下了边距。

保证金会影响 DOM元素的大小：W3Schools source

解决方案

（JSFiddle）替换.section25和.section75

的右边距

CSS

.section75 {
  background: none repeat scroll 0 0 green;
  float: left;
  margin: 0 auto;
  width: 75%; }

.section25 {
  background: none repeat scroll 0 0 blue;
  float: left;
  margin: 0 auto;
  width: 25%; }

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

6 个答案:

解释

解决方案

CSS