html - 三个div并排，向右 float 并响应

Dropdown1和Dropdown2必须向右浮动。分页必须在右边。
分页内容可能会减少，下拉菜单1和2必须进行相应调整。我尝试了其他方法，但无法获得解决方案。在移动设备中，所有三个div必须居中。



我们正在使用引导程序。格如下

<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">



                  <!-- Title -->

        </div>

    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">

            <div style="float:right">

                <ul class="nav">

                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="sortby">Drop Down 2<b class="caret"></b></a>
                        <ul class="dropdown-menu " style="text-transform:uppercase;">
                            <li data-filterkind="$p" data-filtervalue="DESC">
                                <a href="./" >1</a>
                            </li>
                            <li data-filterkind="$p" data-filtervalue="ASC">
                                <a href="./" >2</a>
                            </li>
                        </ul>
                    </li>

                </ul>

            </div>
            <div class="pull-right">
               <!-- Drop down 2 -->
            </div>
        </div>


            </div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">

            <div style="float:right" >

                  <!-- Pagination -->
            </div>
        </div>
        </div>

请建议

最佳答案

像这样吗

的HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center heading1">
            <p> Heading </p><!-- Heading -->
        </div>
        <div class="col-sm-6">
            <div class="row">
                <div class="float text-center">
                    <div class="col-sm-4">
                        <p> DD1</P><!-- Drop down 1 -->
                    </div>
                    <div class="col-sm-4">
                        <p> DD2</P><!-- Drop down 2 -->
                    </div>
                    <div class="col-sm-4">
                        <p> PAGINATION</P><!-- pagination -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后将以下其他内容添加到自定义CSS中：

@media (min-width: 768px)
{
    .float
        {
            float: right;
        }
    .heading1
        {
            text-align: left;
        }
}

仅供参考-以上是引导程序，但需要其他类才能获得所需的自定义结果。

关于html - 三个div并排，向右 float 并响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29981435/