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

当前的小提琴，同时考虑到 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 */
}

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

Answer 2

以下是如何使用浮点数实现它的基本示例：

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

的CSS：

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

如果没有足够的空间占据屏幕的33％，并且#content containers min-width设置为您想要的值，那么你的最后一个div将会换行。

小提琴：http://jsfiddle.net/s4secygm/

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

2 个答案: