Question

我正在开发一个html页面，其中有一个div标签，在div标签里面有一个多个div标签，里面每个div标签都有一些div标签

例如

<div>
     <div class=wrap>
           <div class="child" style="width:30%"></div>
           <div class="child" style="width:30%"></div>   
           <div class="child" style="width:40%"></div>
    </div>

    <div class=wrap>
           <div class="child" style="width:10%"></div>
           <div class="child" style="width:50%"></div>   
           <div class="child" style="width:40%"></div>
    </div>


     <div class=wrap>
           <div class="child" style="width:70%"></div>
           <div class="child" style="width:30%"></div>   

    </div>


    <div class=wrap>
            <div class="child" style="width:100%"></div>
    </div>


    <div class=wrap>

           <div class="child" style="width:80%"></div>
           <div class="child" style="width:10%"></div>   
           <div class="child" style="width:10%"></div>

    </div>

</div>

我的预期结果是

|------30------|------30------|---------40----------|
|--10--|---------40---------|----------50-----------|
|-----------------70-----------------|------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|--10--|

但实际结果我GOT

|------30------|------30------|
---------40----------|
|--10--|---------40---------|
----------50-----------|
|-----------------70-----------------|
------30------|
|------------------------100------------------------|
|-------------------80----------------|--10--|
--10--|

这意味着子div标签占用父div标签的100％区域时溢出并进入新行，但我希望div标签水平（如果属于同一父div）

我尝试使用div标签的overflow属性作为overflow：hidden但它隐藏了可能溢出的下一个div标签

下面是我的css课程 CSS代码：

.child
{
 float:left;
height:50px;
position: relative;
 overflow: hidden;
 border-bottom:1px solid #46464f;
border-right:1px solid #46464f;

}

.wrap {
    height: 50px;
    width: 100%;

    border-top: 1px solid #46464f;
    border-left: 1px solid #46464f;
}

请帮忙......

Answer 1

现在在box-sizing 类中定义.child因为你定义 border left或top

孩子 with 计算此50%+1

.child{
box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

的 Live Demo 的

有关 box-sizing
的更多信息

Answer 2

您的左右边框每增加1px到总宽度。这对于.wrap元素来说并不算太大，但对于.child元素，它们并不能完全适合一行，因为它们每个都有额外的1px宽度。

以下是使用outline（不添加宽度）的布局，以显示子元素的位置：http://jsfiddle.net/tWESq/

您必须删除左右边框。作为一种变通方法，您可能必须为每个.child元素添加另一个内部div，并在其上设置边框。 If you can use box-sizing属性，这也是一种解决方案。

Answer 3

我认为你们之间有一些div之间的空格。尝试删除所有这样的空格

<div class="child" style="width:30%"></div><div class="child" style="width:30%"></div><div class="child" style="width:40%"></div>

或者也许是因为

border-right:1px solid #46464f;

尝试删除它。

Div内的Div具有css的溢出属性

3 个答案: