div 不能与屏幕宽度相同，另一个 div 不允许答案

【问题标题】：div cannot be the same width as screen, another div does not allowdiv 不能与屏幕宽度相同，另一个 div 不允许
【发布时间】：2019-04-09 07:47:31
【问题描述】：

我想让红色的div 与屏幕的宽度相同。但它与另一个div 对齐，它不能是全宽的。

红色div 的区域在绿色div 之前可用，但我希望它是全宽的。

另外，我希望红色的div 垂直和水平居中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


  <div class="position-fixed-top border bg-info float-right"
  style="
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 30px;
    background-color: green;
    ">
      ئـۆفـه‌ری رۆژانــه‌
  </div>


  <div class="h-100 row align-items-center justify-content-center">
    <div class="col-12" style="background:red">
      Content content content content
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您在标题上使用了 float-right 类，这使得下面的 div 不会浮动到整个宽度，添加一个 class="clearfix" 的空 div 将解决您的问题。

这是用于分辨率的笔。 https://codepen.io/mohammad-aslam/pen/axBxPP

<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


        <div class="position-fixed-top border bg-info float-right" style=" border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; font-size: 30px;background-color: green;">ئـۆفـه‌ری رۆژانــه‌
        </div>

<div class="clearfix"></div>
        <div class="h-100 row align-items-center justify-content-center">
            <div class="col-12" style="background:red">
                Content content content content
            </div>
        </div>
        </div>

希望对你有帮助。

【讨论】：

【解决方案2】：

如果不希望div占用文档流的任何空间，最好使用position: absolute：

<div 
    class="position-fixed-top position-absolute border bg-info float-right" 
    style="
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        font-size: 30px;
        background-color: green;
    ">
    ئـۆفـه‌ری رۆژانــه‌
</div>

https://jsbin.com/busuxufozo/edit?html,output

【讨论】：

【解决方案3】：

要在middle vertically and make width:100%;中制作红色div，可以设置position:absolute; to upper div

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">

  <div class="position-fixed-top border bg-info"
    style="
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      font-size: 30px;
      background-color: green;
      position:absolute;
      right:15px;
      top:0px;
      ">
    ئـۆفـه‌ری رۆژانــه‌
  </div>

  <div class="h-100 row align-items-center justify-content-center text-center">
    <div class="col-12" 
    style="
    background:red;
    ">
      Content content content content
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

您可以添加容器流体类并给出如图所示的绝对位置。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-12 mt-2" style="border-radius: 12px; height: 250px; background-color: #5b6269">


        <div class="position-fixed-top border bg-info float-right" style=" border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; font-size: 30px;background-color: green;">ئـۆفـه‌ری رۆژانــه‌
        </div>


        <div class="h-100 row align-items-center justify-content-center container-fluid" style="position: absolute;">
            <div class="col-12" style="background:red">
                Content content content content
            </div>
        </div>
        </div>

【讨论】：

【解决方案5】：

仅将 (position-fixed-top) 更改为 (position-fixed-top position-absolute)

【讨论】：