Question

这是在扼杀我。我的问题是两个百分比宽度的Div不能组合在一起。我上次检查时，75％+ 25％= 100％，但不知何故，它们总是打破布局，不守规矩的文本会进入下一个可用的空白区域。

正如您将在下面的简化示例中看到的，我尝试使用display：inline-block，float：left float：right，white-space：nowrap和overflow：hidden。

      #reddiv {
        width: 75%;
        height: 150px;
        border: 1px solid red;
        float: left;
        display: inline-block;
        /*white-space:nowrap;*/
        /*overflow: hidden;*/
      }
      #bluediv {
        width: 25%;
        height: 500px;
        border: 1px solid blue;
        float: left;
        display: inline-block;
        /*float: right;*/
        /*white-space:nowrap;*/
        /*overflow: hidden;*/
      }

<!DOCTYPE html>
<html>

<head>

  <style>
    #reddiv {
      width: 75%;
      height: 150px;
      border: 1px solid red;
      float: left;
      display: inline-block;
      /*white-space:nowrap;*/
      /*overflow: hidden;*/
    }
    #bluediv {
      width: 25%;
      height: 500px;
      border: 1px solid blue;
      float: left;
      display: inline-block;
      /*float: right;*/
      /*white-space:nowrap;*/
      /*overflow: hidden;*/
    }
  </style>

</head>

<body>

  <div id="reddiv"></div>
  <div id="bluediv"></div>

  <p>Unruly text</p>
</body>

</html>

Answer 1

尝试将box-sizing:border-box添加到您的div（或所有div，或*）

*{box-sizing:border-box;}

请参阅以下代码段中的成功。

＆＃13;

*{box-sizing:border-box;}
#reddiv {
        width: 75%;
        height: 150px;
        border: 1px solid red;
        float: left;
        display: inline-block;
        /*white-space:nowrap;*/
        /*overflow: hidden;*/
      }
      #bluediv {
        width: 25%;
        height: 500px;
        border: 1px solid blue;
        float: left;
        display: inline-block;
        /*float: right;*/
        /*white-space:nowrap;*/
        /*overflow: hidden;*/
      }

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <style>
    #reddiv {
      width: 75%;
      height: 150px;
      border: 1px solid red;
      float: left;
      display: inline-block;
      /*white-space:nowrap;*/
      /*overflow: hidden;*/
    }
    #bluediv {
      width: 25%;
      height: 500px;
      border: 1px solid blue;
      float: left;
      display: inline-block;
      /*float: right;*/
      /*white-space:nowrap;*/
      /*overflow: hidden;*/
    }
  </style>

</head>

<body>

  <div id="reddiv"></div>
  <div id="bluediv"></div>

  <p>Unruly text</p>
</body>

</html>

＆＃13;

进一步阅读：

https://css-tricks.com/box-sizing/

Answer 2

Gibberish的回答是正确的。就浮点数与内联块而言，在这种情况下，您将需要使用float。内联块内置边距，不允许使用75％+ 25％。

CSS应该是这样的。

*{box-sizing:border-box;}
#reddiv {
        width: 75%;
        height: 150px;
        border: 1px solid red;
        float: left;

      }
      #bluediv {
        width: 25%;
        height: 500px;
        border: 1px solid blue;
        float: left;

      }

Answer 3

这些都是正确的，但你在使用display时也必须意识到：inline-block，占用了空白区域。所以75％+ 25％+一点点空白=超过100％请看小提琴https://jsfiddle.net/u9z1euwn/

<div id="reddiv"></div><div id="bluediv"></div>

百分比宽度Div不适合

3 个答案: