Css 浮动div和右对齐

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

我试着让三个潜水艇靠在一起漂浮。但是，正如您在my中可能注意到的，右div与它上面和下面的其他元素没有正确对齐

宽度、填充、边距有问题吗

CSS

HTML

左列
主要的
右栏

尝试使用框大小属性

“长方体大小”属性允许您定义某些图元，以便以特定方式适合某个区域

了解它

检查这个

---

填充+边距+宽度的总和必须小于或等于100%，除非添加框大小：边框框（仅适用于较新的浏览器）如果要使某个内容向右浮动并对齐，它需要位于html中其他div的上方-只是“causeIm”。那么像这样？或者喜欢或者喜欢。上帝，我很无聊，哈哈。写代码的时候，请务必检查你的拼写。是的，当然！这里的问题是他使用px的填充，这推动了widthwidth+填充+边框=长方体的实际可见/渲染宽度+高度+填充+边框=长方体的实际可见/渲染高度

#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;
    } 

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

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