尝试使用引导 css 将三个 div 浮动到左侧中心和右侧答案

【问题标题】：trying to float three divs to the left center and right using bootsrap css尝试使用引导 css 将三个 div 浮动到左侧中心和右侧
【发布时间】：2016-08-16 21:44:10
【问题描述】：

我正在尝试将三个 div 浮动到左侧中心和右侧，并且水平方向应该相同。这是我的尝试：

HTML

//to be centered div
<div style="float:center">

    <form>
    </form>

    <form>
    </form>

</div>
//to be floated to the left
<div style="float:left" id="active-container" class="row">
    <div class="col-lg-1 col-centered">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE LEFT </strong></p>

        <div id="active_users">
        </div>


    </div>
</div>

//to be floated to the right
<div style="float:right" id="engaged-container" class="row">

    <div class="col-lg-1 col-centered">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE RIGHT </strong></p>

        <div id="engaged_users">
        </div>

    </div>
</div>

CSS

.col-centered {
  float: none;
  margin: 0 auto;
}

我的挑战是三个 div 浮动到左侧、中心和右侧，但它们从未从该位置开始，只有左右 div 位于同一位置。

请问我如何将三个 div 浮动到左侧中心和右侧，并从使它们水平对齐的相同位置开始。

【问题讨论】：

你应该看看Flexbox - 也可能是How to align 3 divs (left/center/right) inside another div?的副本
我正在使用引导程序...
“我正在使用 bootstrap...” – 几乎没有......你是相当违反 bootstrap，通过将 float 之类的东西应用于行元素（和在路上发明你自己的价值观，float:center——这甚至不存在。）你应该开始 one行，它有三列。如果列宽加起来不等于 12，则添加一些偏移类。
你的意思是我是否需要引导程序？是的，我这样做是为了响应

标签： html css twitter-bootstrap

【解决方案1】：

我认为您是 Bootstrap 的新手，请在此处获取此答案并自己阅读文档。

<div class="container">
  <div class="row">

    //to be centered div
    <div class="col-md-4 col-md-push-4">
        <form>
        </form>
    </div>

    //to be floated to the left
    <div id="active-container" class="col-md-4 col-md-pull-4">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE LEFT </strong></p>
        <div id="active_users">
        </div>
    </div>

    //to be floated to the right
    <div id="active-container" class="col-md-4">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE RIGHT </strong></p>
        <div id="engaged_users">
        </div>
    </div>

  </div>
</div>

【讨论】：

【解决方案2】：

对于引导程序，请尝试使用 .center-block 类

将元素设置为display: block 并通过margin 居中。可作为 mixin 和 class 使用。

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

示例：

<div class="row">
    <div class="col-xs-12">
        <div class="your-custom-class center-block">
            // your code here
        </div>
    </div>
</div>

【讨论】：

我有三个 div 而不是一个
您确实有 3 个 div，请根据您的代码调整此示例：) .center-block 需要设置 width 或 max-width。为此，我添加了.your-custom-class。您可能还想看看这个：Bootstrap Guidelines
不明白这个
.your-custom-class 包含您的自定义 CSS，可能是背景或其他，它应该包含您元素的 width 或 max-width
我可以这样做吗