如何将浮动的左右 div 推到中间的旁边

Question

图片：

我想让它们都在页面中间居中，左右浮动 div紧挨着中间那个。

我可以通过对左右浮动 div 使用 margin-left: [val]px 和 margin-right: [val]px 来针对特定屏幕尺寸实现此效果。但是，由于页面的宽度是动态的（我使用的是 ZURB Foundation 5），我无法指定具体值，因为不同的显示器会以不同的方式呈现页面，通常会导致中间 div被推倒了。

这是我现在的代码：

HTML

<div id="container">

<div class="hide-for-small" id="templatemo_wrapper_left">
    <table>
        .
        .
        .
    </table>
</div>

<div class="hide-for-small " id="templatemo_wrapper_right">
    <table>
        .
        .
        .
    </table>
</div>

<div class="center">
    .
    .
    .
</div>

</div>

CSS

    #templatemo_wrapper_left {
    float: left;
    width: 120px;
}

    #templatemo_wrapper_right {
    float: right;
    width: 120px;
}

    #container {
    text-align: center;
}

.center {
    text-align: left;
    display: inline-block;
}

    #templatemo_wrapper_left table, #templatemo_wrapper_right table {
    position: relative;
    border: none;
    text-align: center;
    width: 120px;
}

我已经尝试解决这个问题一段时间了，希望能得到一些帮助。谢谢！

Answer 1

你真的需要漂浮吗？或者 display:flex 是一个选项吗？那么就变得很简单了：

/* solution */
.container {
  display: flex;
  justify-content: center;
}
/* for demo purposes */
* { height: 50px }
.container { width: 400px; background-color: rgba(0,0,0,.1) }
.content { width: 100px; background-color: green }
.hidden-xs { width: 10px; background-color: blue }

<div class="container">
  <div class="hidden-xs"></div>
  <div class="content"></div>
  <div class="hidden-xs"></div>
</div>

如何将浮动的左右 div 推到中间的旁边

How to push floated left and right divs right next to a middle one

html

css

jquery

zurb-foundation