1

我有三个完整长度为 150% 的 div，但我没有让它们在一行中浮动：这是我的 html：

<div class="clearfix">
<div class="left" id="w1">TEST</div>
<div class="left" id="w2">TEST</div>
<div class="left" id="w3">TEST</div>
</div>

我的CSS：

html,body { height:100%;width:auto;}

.left {
float: left;

}
  #w1 {width:20%;
 background-color:#009;
  }
#w2{width:100%;
  background-color:#9F3;
 }
#w3{ width:30%;
background-color:#30C;}

这是小提琴的完整代码：http: //jsfiddle.net/sZwXN/1/ 此外，如果每个面板的高度都为 100%，那就太好了！

4

8 回答 8

3

您可以替换float: left为, 并用anddisplay: table-cell将三个 div 放入另一个 div 中，而不是试图用 来欺骗。display: tablewidth: 150%float

因此，通过像这样更新您的代码，您将获得所需的内容： 

<div class="wrapper">
  <div class="left" id="w1">TEST</div>
  <div class="left" id="w2">TEST</div>
  <div class="left" id="w3">TEST</div>
</div>

和 CSS ： 

.wrapper
{
  display: table;
  width: 150%;
}

.left {
  display: table-cell;
}

#iw并将您的宽度分别更改为14%，66%并20%保持您正在寻找的比例。

看看：http: //jsfiddle.net/sZwXN/7/

于 2013-07-18T07:05:33.750 回答
1

If you want 3 div in a row then you will use float:left with all div, but you can not take 150% width in a total of div width. You can take 100% maximum. So, Adjust your width of all div and take total 100%.

于 2013-07-18T10:29:49.330 回答
1

3 个 div 大于其父级的宽度。您需要调整它们，使它们的总宽度小于或等于 100%。

于 2013-07-18T07:01:36.523 回答
1

总宽度不应超过 100%。在您的情况下为 150%，因此使比率与 100% 相同。比如 150% 的 20% = 大约 12%等等......

html,body {高度：100%；宽度：自动；}

.left {
float: left;

}
#w1 {width:12%;
background-color:#009;
}
#w2{width:70%;
background-color:#9F3;
}
#w3{ width:18%;
background-color:#30C;}

http://jsfiddle.net/sZwXN/4/

于 2013-07-18T07:02:35.850 回答
0 
To have in one line reduce the width of w2

#w2{width:50%;
  background-color:#9F3;
 }
于 2013-07-18T07:00:45.400 回答
0

试试这个css和html

HTML

<div class="left" id="w1">TEST</div>

<div class="right" id="w3">TEST</div>

<div id="w2">TEST</div>

CSS

html,body { height:100%;width:auto;}

    .left {
    float: left;

    }
    .right{float:right;}
    #w1 {width:20%;
    background-color:#009;
    }
    #w2{
    background-color:#9F3;
    }
    #w3{ width:30%;
    background-color:#30C;}

演示

于 2013-07-18T07:00:47.613 回答
0

由于您的第二个 div 为 100%，因此浮动元素在宽度上没有空间时会断线，因此他永远不会有空间与其他具有相同水平宽度的元素一起使用

于 2013-07-18T07:03:49.063 回答
0

问题在于语义，而不是代码。

百分比值总是指外部的、定义了宽度的“父亲”元素、视口或 HTML。

如果您说 div has width: 100%;，则表示它与包含元素一样大。

不管你说 html/body 是 10000px 还是 200% 宽都没有关系：div 将具有相同的宽度，因为，你猜怎么着……它是 100% 宽的。

这个问题真的 问错了......尝试通过指定您真正想要实现的目标来重新制定。

否则，您将需要 Chuck Norris。他数到无穷。两次。我猜他可以数到150%。

于 2013-07-18T08:20:55.613 回答