1

我正在开发一个 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--|

但我得到的实际结果

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

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

我尝试使用 div 标签的溢出属性作为溢出：隐藏，但它隐藏了下一个可能溢出的 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;
}

请帮忙...

4

3 回答 3

3

现在box-sizing 在您的.child 班级中定义，因为您定义了边框 left或top

比你的孩子 with计算这个50%+1 

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

现场演示

更多关于盒子尺寸的信息

于 2012-11-27T06:50:40.000 回答
2

您的左右边框各增加 1px 的总宽度。这对元素来说没什么大不了的.wrap，但是对于.child元素来说，这使得它们不能全部放在一行中，因为它们每个都有额外的 1px 宽度。

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

您必须删除左右边框。作为一种解决方法，您可能必须为每个.child元素添加另一个内部 div 并在其上设置边框。如果您可以使用该box-sizing属性，那也是一个解决方案。

于 2012-11-27T06:50:40.777 回答
0

我认为您在某些 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;

尝试删除它。

于 2012-11-27T06:49:17.390 回答