html - CSS:如何将子div并排放置在主div中

Question

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

我希望每个 div 应该具有相同的高度和相同的背景色。前两个 div 应该有 float:left，最后一个应该有 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 fiddle 链接 https://jsfiddle.net/tridip/t55azjpk/ .所以任何人都可以看到我得到了什么样的奇怪输出。寻找建议和纠正代码示例。谢谢

编辑

输出会像图像一样。

Answer 1

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

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

HTML

<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; }

DEMO

---

flexbox 的优势:

1. 最少的代码；非常有效率
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. react 灵敏
6. 与 float 和表格不同，它们提供有限的布局能力，因为它们从未用于构建布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

---

要了解有关 flexbox 的更多信息，请访问:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS 技巧
• What the Flexbox?! ~ YouTube 视频教程