浮动 div 和右对齐

Question

如果这个问题已经在网站的其他地方得到回答，我真的很抱歉。 我对 html 和 css 还很陌生，而且我经常被困在同一个地方，浮动 div。

我正在尝试使三个 div 彼此相邻浮动。但是，正如您在我的 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 */    
}