Question

我有三个完整长度为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％，那就太好了！

Answer 1

您可以将float: left替换为display: table-cell，并将三个div放入另一个display: table和width: 150%，而不是试图用{{1}进行欺骗}。

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

float

CSS：

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

并将.wrapper { display: table; width: 150%; } .left { display: table-cell; }宽度分别更改为#iw，14%和66%，以保持您正在寻找的比率。

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

Answer 2

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

Answer 3

总宽度不应超过100％。 在你的情况下150％所以使比率与100％相同。比如150％的20％=约12％等等...

html，body {height：100％; width：auto;}

.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/

Answer 4

如果你想连续使用3个div，那么你将使用float：left和所有div，但是你不能在div宽度的总宽度上使用150％的宽度。你最多可以拿100％。因此，调整所有div的宽度并总计100％。

Answer 5

To have in one line reduce the width of w2

#w2{width:50%;
  background-color:#9F3;
 }

Answer 6

试试这个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;}

<强> Demo

Answer 7

浮动元素在宽度上没有空格时会断行因为你的第二个div是100％，所以对于他来说永远不会有空间与其他宽度在同一水平的元素

Answer 8

问题出在语义上，而不是代码中。

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

如果你说div有width: 100%;，则意味着它与包含元素一样大。

如果你说html / body是10000px或200％宽也没关系：div会有相同的宽度，因为，猜猜是......它是100％宽。

问题是真的误解 ...尝试通过指定真正尝试实现的目标来重新制定。

_{否则，你需要查克诺里斯。他数到无穷大。两次。我猜他可以数到150％。}

显示3 div彼此相邻

8 个答案: