百分比宽度 Div 不适合答案

【问题标题】：Percentage-Width Divs don't fit百分比宽度 Div 不适合
【发布时间】：2018-07-17 23:26:38
【问题描述】：

这可要了我的命。我的问题是两个具有百分比宽度的 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>

【问题讨论】：

标签： html css layout

【解决方案1】：

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

*{box-sizing:border-box;}

在下面的代码 sn-p 中查看成功。

*{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;*/
      }

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

进一步阅读：

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

【讨论】：

无可挑剔！谢谢！

【解决方案2】：

这些是正确的，但是您还必须在使用 display: inline-block 时意识到，空白被占了。所以 75% + 25% + 一点空白 = 超过 100% 见小提琴https://jsfiddle.net/u9z1euwn/

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

【讨论】：

【解决方案3】：

Gibberish 的回答是正确的。就浮动与内联块而言，在这种情况下，您将需要使用浮动。 Inline-block 具有内置边距，不允许您使用 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;

      }

【讨论】：