Javascript 将div居中，使孩子们向左浮动

我有两个div，我希望其中一个在屏幕上居中，另一个在其父目录MyContent的左侧（居中）。但是，它似乎添加了一个“Float:left；”to#Latest导致DOM错误，#MyContent不再保持#Latest，它缩小了，离开了#Latest，就像#Latest是“position:absolute；”而它是“relative；”

我有：

HTML:

<center>
    <div id="MyContent">
        <div id="Latest">
            <div class="Last"></div>
        </div>
    </div>
</center>

#MyContent {
    position: relative;
    font-family: FontStencil;
    font-size: 12px;
    padding: 20px 20px 160px 20px;
    color: black;
    background: rgba(240, 240, 240, 0.2);
    border-radius: 18px;
    border: 1px solid #CCCCCC;
    top: 250;
    width: 950px;
    box-shadow: 0px 5px 15px -2px black;
}

#Latest {
    position: relative;
    font-family: FontStencil;
    float: left; /* When I remove THIS, everything works Fine BUT its all centered */
    text-align: left;
    font-size: 18px;
    padding: 20px 20px 30px 20px;
    color: #000033;
    background: white;
    border-radius: 18px;
    border: 1px solid #CCCCCC;
    left: 20px;
    top: 30px;
    width: 570px;
    box-shadow: 0px 1px 17px -5px black;
}

.Last {
    position: relative;
    font-family: SuperG;
    text-align: left;
    right: -18px;
    font-size: 12px;
    padding: 15px;
    color: #000033;
    background: white;
    border-radius: 18px;
    border: 1px solid #CCCCCC;
    top: 25px;
    width: 500px;
    height: 415px;
    box-shadow: 0px 1px 17px -5px black;
}

一切都是位置：相对的；但当我添加一个float时，它的行为就好像“Latest”不是：left；HALP.

CSS

#MyContent{
font-family:FontStencil;
font-size:12px;
padding:20px 20px 160px 20px;
color:black;
background:rgba(240,240,240, 0.2);
border-radius:18px;
border:1px solid #CCCCCC;
top:250;
width:950px;
box-shadow: 0px 5px 15px -2px black;
margin: 0 auto;
    display: inline-block;
}

#Latest{
position:relative;
font-family:FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align:left;
font-size:18px;
padding:20px 20px 30px 20px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
left:20px;
top:30px;
width:570px;
box-shadow: 0px 1px 17px -5px black;
}

.Last{
position:relative;
font-family:SuperG;
text-align:left;
right:-18px;
font-size:12px;
padding:15px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
top:25px;
width:500px;
height:415px;
box-shadow: 0px 1px 17px -5px black;
}

---

试试上面的CSS

遗憾的是，我需要的宽度是570px，因为它应该是左侧的一个盒子，用来存放消息，而右侧将有另一个更薄的盒子，用来存放选项。您希望“MyContent”居中且“MyContent”最新的位于“MyContent”的左侧。对吗？没错，我想把“最新”放在左边，因为右边会有另一个框，而“MyContent”应该放在HTML的中心。这一个很好用，因为“最新”的问题似乎已经解决了，但需要居中时它会把“MyContent”放在左边。你想让最后一个div完全放在左边吗？？如果我错了，请更正，最新的在它的父对象左侧，我希望它居中，最后一个是子对象，最新的。从

\Latest

中去掉

浮动：Left

，将

边距：0 auto

添加到

\MyContent

并删除

中心的
标签应该可以做到这一点