CSS：如何将子div并排放置在主div中

Question

我有一个主 div，主 div 有多个子 div。我无法一个接一个地定位子div。

我希望每个 div 应该具有相同的高度和相同的背景颜色。前两个 div 应该有float:left，最后一个 div 应该有float:right。我这样做了，但仍然没有得到正确的输出。

这是小代码片段

<div id="content">
    <div id="recinfo">Records 1/5 of 50</div>
    <div id='pager'>
        <ul class="paginate pag5 clearfix">
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li class="current">6</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="navpage"><a href="">last</a></li>
        </ul>
    </div>

    <div id='loader'>Loading.....<img src="images/busy.gif" /></div>
</div>

我的CSS代码很大，这就是为什么我没有将它粘贴到这里，而是在这里给出我的js小提琴链接https://jsfiddle.net/tridip/t55azjpk/。所以任何人都可以看到我得到了什么样的奇怪的输出。寻找建议和纠正的代码示例。谢谢

编辑

输出想要类似图像的东西。

Answer 1

您可以使用 CSS flexbox实现此布局。

这是一个通用的解决方案：

超文本标记语言

<div id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

CSS

#content { display: flex; }
#content > div:nth-child(2) { flex: 1; }

演示版

弹性盒的优点：

1. 最少的代码；非常高效
2. 垂直和水平居中，简单易行
3. 等高柱简单易行
4. 对齐弹性元素的多个选项
5. 它反应灵敏
6. 与浮动和表格不同，浮动和表格提供的布局能力有限，因为它们从未用于构建布局，Flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

要了解有关 Flexbox 的更多信息，请访问：

• 对齐 Flex 项目的方法
• 使用 CSS 灵活框~ MDN
• Flexbox 完整指南~ CSS 技巧
• 什么是弹性盒？~ YouTube 视频教程