xml - 水平居中的 div 旁边有一个 div，有点响应式

Question

这是我的代码:

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

#container
{
    background: #aaa;
    padding: 3em 0;
    text-align: center;
}
#container > div
{
    display: inline-block;
    background: #777;
    padding: 3em;
}

还有我目前的情况:

http://jsfiddle.net/zu0f6jcm/

现在我的问题是；
a) 我怎样才能使内部 div 居中，这样 span 就不会影响它的位置？
和
b) 如何让 span 与内部 div 保持一致，除非没有足够的空间来显示 span 在一行中，在这种情况下它应该移动到内部 div 下方？

澄清b):我正在寻找的行为有点像你添加

span
{
    float: right;
}

到当前的 fiddle ，同时考虑到 a)。我还应该最好能够用边距定位跨度，什么不是。

没有 JS。

Answer 1

您正在寻找的定位可以通过像这样修改您的 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 */
}

但是，这不会自动处理问题中“如果没有空间则移至底部”部分。为此，您需要使用媒体查询并根据不同的设备宽度更改您的样式规则。