css在两个div中间展开div将它们推向两侧

Question

如何实现这一目标？我尝试使用内联块，但兄弟姐妹移动到新行，我希望div移动到两侧，任何提示？

http://fiddle.jshell.net/prollygeek/CdE2y/

将鼠标悬停在中间区域。

Answer 1

所有div都是inline-block，因此要阻止他们转到下一行，请尝试将white-space设置为nowrap container：

#container {
  ...
  white-space:nowrap;
}

以下是working fiddle

Answer 2

如何保持一切充实并居中？

这使用来自http://getbootstrap.com/的justified列表项规则并使用li代替div

的小技巧

<ul id="container">
    <li id="div1">
        <p>Col 1</p>
    </li>
    <li id="div2">
        <p>Col 2</p>
    </li>
    <li id="div3">
        <p>COl 3</p>
    </li>
</ul>

http://fiddle.jshell.net/CdE2y/5/

Answer 3

试试这个：http://jsfiddle.net/prollygeek/CdE2y/

我将inline-block更改为table-cell并在:hover上应用#container。