3

我无法理解为什么我的 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>

这是小提琴

4

6 回答 6

1

用 0,5% 而不是 o,5 px 替换您的边距

于 2013-06-14T11:23:34.670 回答
1

.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

于 2013-06-14T11:44:36.237 回答
0

解释

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

边距会影响DOM 元素的大小：W3Schools 源

解决方案

( 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%; }
于 2013-06-14T11:24:48.863 回答
0

您需要将边距更改为仅右边。也将浮动更改为右侧。

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

.section25 {
  background: none repeat scroll 0 0 blue;
  float: right;
  margin: 0 5px 0 0;
  width: 24%; }
于 2013-06-14T11:21:10.673 回答
0

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

margins因为你在你的div 上有 left 和 right section，而他们不在75%，我们被设置为74% and 24%等等。

于 2013-06-14T11:21:17.330 回答
0

这是因为您使用了边距，边距在盒子的外面，而填充在里面。（边距将与宽度一起添加）

消除

margin

从你的容器

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

于 2013-06-14T11:23:09.513 回答