Css 如何正确定位div

我有三个div，main，right和left。主div包含右div和左div，我想将右div和左div并排对齐。我在这里读过几篇文章，但都没有达到预期的效果

html，
身体{
保证金：0；
填充：0；
}
分部#主要内容{
背景色：深蓝色；
身高：100%；
}
div#右侧内容{
位置：相对位置；
宽度：35%；
身高：100%；
背景色：#ffffff；
}
div#左内容{
位置：绝对位置；
宽度：钙（100%-35%）；
身高：100%；
保证金：0px 0px 0px 666px；
背景色：#00aeef；
}

---

现在在容器上使用

显示的最简单方法：flex

。看看我的代码片段中的设置-我删除了很多其他的设置，这些都不是必需的

html，
身体{
保证金：0；
填充：0；
身高：100%；
}
分部#主要内容{
背景色：深蓝色；
身高：100%；
显示器：flex；
}
div#右侧内容{
宽度：35%；
身高：100%；
背景色：红色；
}
div#左内容{
宽度：65%；
身高：100%；
背景色：#00aeef；
}

---

我个人会使用

display:inline block

来对齐左右div 并排添加必要的宽度，使之达到父宽度的100%。请确保在父项上使用

font-size:0

，以消除左右两个div之间的空白，使它们正确地挨在一起

请确保为左右内容指定字体大小，以便您的内容真正显示出来

此方法在很大程度上向后兼容所有浏览器

div#main-content{
    font-size:0;
}

div#left-content{
    display:inline-block;
    vertical-align:top;
    width:65%;
}

div#right-content{
    display:inline-block;
    vertical-align:top;
    width:35%;
}

---

绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。查看@Paulie_D，谢谢你的链接。仍然在学习CSS，所以坚持旧的想法。我没有把代码放在代码段中，因为它没有显示全部内容。然后你需要编辑你的问题并包含一个，否则你的问题将被关闭。flex与IE兼容吗？我必须确保它能在所有浏览器上运行。这取决于版本-从11开始，是的。看见

div#main-content{
    font-size:0;
}

div#left-content{
    display:inline-block;
    vertical-align:top;
    width:65%;
}

div#right-content{
    display:inline-block;
    vertical-align:top;
    width:35%;
}