css - float div 和右对齐

Question

如果这个问题已经在网站的其他地方得到回答，我真的很抱歉。 我是 html 和 css 的新手，我经常卡在同一个地方， float div。

我试图让三个 div 彼此相邻 float 。但是，您可能会在我的 jsfiddle 中注意到, 右侧的 div 没有与其上方和下方的其他元素右对齐。

宽度、内边距、边距有问题吗？

http://jsfiddle.net/_karima/aWaT2/

CSS

#article {
    overflow:auto;
    }

    #left-column {
    background: yellow;
    width:19%;   
    height: 100px;
    }

    #main {
    background: yellow;
    width:39%;
    height: 300px;
    }


    #right-column {
    background: blue;
    width: 29%;
    height: 150px;

    }
    #left-column, #main, #right-column {    
    float: left;
    margin: 1%;
    padding: 7px;
    } 

HTML

<div id="article">
<div id="left-column"> left-column</div>
<div id= "main">main</div>
<div id="right-column"> right column</div>
</div>

Answer 1

尝试使用 box-sizing 属性

box-sizing 属性允许您定义某些元素以某种方式适合某个区域

了解一下here

检查这个fiddle

#left-column, #main, #right-column {
    float: left;
    margin: 1%;
    padding: 7px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */    
}