Xml 水平居中的div，旁边有一个div，有点反应灵敏

这是我的密码：

<div id='container'>
    <div>
        Example Content    
    </div>
    <span>
        Bla Bla Bla Bla Bla
    </span>
</div>

还有我目前的状况：

现在我的问题是,； a如何使内部div居中，使跨度不影响其位置？以及 b除非没有足够的空间在一行上显示跨距，否则如何使跨距与内部div保持一致，在这种情况下，跨距应该移动到内部div的下方

澄清一下b：我想要的行为有点像你加上

span
{
    float: right;
}

到当前小提琴，同时考虑到a。我最好也能用边距来定位跨度

---

如果没有JS。

您需要的定位可以通过如下方式修改CSS来实现：

#container {
    background: #aaa;
    padding: 3em 0;
    text-align: center;
    position: relative:  /* additional style */
}

/* no changes to the '#container > div' rule */

#container span {
    position: absolute;
    padding: 3em 0;  /* copied this from your padding above, mod as necessary */
    right: 0;        /* adjust this to whatever positioning you need */
    top: 0;          /* adjust this to whatever positioning you need */
}

---

但是，如果你的问题没有空格部分，这将不会自动处理移动到底部的操作。为此，您需要使用媒体查询，并在不同的设备宽度下更改样式规则。

以下是一个基本示例，说明如何使用浮动实现此功能：

 <div id='container'>
     <div>
         &nbsp;
     </div>
     <div id="content">
         Example Content    <br/>
         Example Content
     </div>
     <div>
     Bla Bla Bla Bla Bla
     </div>
 </div>

当内容容器最小宽度设置为您想要的值时，最后一个div没有足够的空间占据屏幕的33%时，它将自动换行

小提琴：

 <div id='container'>
     <div>
         &nbsp;
     </div>
     <div id="content">
         Example Content    <br/>
         Example Content
     </div>
     <div>
     Bla Bla Bla Bla Bla
     </div>
 </div>

 #container{
     background: #aaa;
     padding: 3em 0;
     text-align: center;
     position:relative;
     overflow: auto;
 }
 #container > div {
    float:left;
    width:33%;
 }

 #container #content{
     background: #777;
     min-width:200px;
 }