Question

我有一个设置为100％宽度的父div，当我将每个5个子div设置为20％时，理论上每个子div应该包含在父div中，而不是在第二行中断。

我之前已经完成了它并且它已经工作了，但它现在不起作用。

看起来有点像这样 -

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
    <div class="child5"></div>
</div>

以下是代码的链接 - http://jsfiddle.net/dtk5zL1e/

如果这有任何不同，我也在使用bootstrap。

Answer 1

只需为要浮动的元素添加公共类，然后添加：

          <div class="container">

                <h1 class="versions">Choose Versions for Report</h1>

                <div class="compare nav">
hello
                </div>

                <div class="first-draft nav">
hi
                </div>

                <div class="second-draft nav">
hello
                </div>

                <div class="third-draft nav">
hi
                </div>

                <div class="fourth-draft nav">
hello
                </div>

            </div>

然后 CSS

   .nav{
    float:left;
    }

JSFIDDLE http://jsfiddle.net/a_incarnati/dtk5zL1e/1/

Answer 2

默认情况下，浏览器始终在div元素之前和之后放置换行符。但是，可以使用

更改CSS

display: inline;

在您的情况下，使用width属性，您应该使用

display: inline-block;

当他们设定为20％时，为什么我的5个孩子div在父div中不会100％？

2 个答案: